{"id":15032,"library":"vue-highlight-component","title":"Vue Highlight Component","description":"Vue Highlight Component is an older Vue 2 component designed to integrate code highlighting into Vue applications using the `highlight.js` library. It specifically targets `highlight.js` v9.x, which is now several major versions behind the current stable `highlight.js` (v11+). This package provides a simple wrapper component, `<highlight>`, allowing developers to display syntax-highlighted code blocks within their Vue templates, either by passing the code as slot content or via a `code` prop. Due to its age and lack of recent updates, it is largely superseded by more actively maintained and official solutions like `@highlightjs/vue-plugin`, which supports both Vue 2 and Vue 3 and integrates with modern `highlight.js` versions. There is no active release cadence, and it is primarily useful for legacy projects still on Vue 2 and an older `highlight.js` version.","status":"abandoned","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/vue-highlight-component","tags":["javascript"],"install":[{"cmd":"npm install vue-highlight-component","lang":"bash","label":"npm"},{"cmd":"yarn add vue-highlight-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-highlight-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core highlighting library that this component wraps. Requires version ^9.12.0.","package":"highlight.js","optional":false}],"imports":[{"note":"The README shows `import Highlight from 'vue-Highlight-component'`, indicating a default export, though the usage in `<script>` implies a named component. For the given package version, assuming it's correctly used as a named component in the options API `components` object.","wrong":"import { Highlight } from 'vue-highlight-component'","symbol":"Highlight","correct":"import Highlight from 'vue-highlight-component'"},{"note":"Required to manually register additional languages not included in the default `highlight.js` bundle. This import is directly from `highlight.js`, not `vue-highlight-component`.","wrong":"const hljs = require('highlight.js')","symbol":"hljs","correct":"import hljs from 'highlight.js'"},{"note":"A `highlight.js` theme stylesheet must be imported separately to apply visual styling to the highlighted code. Choose from available themes in `node_modules/highlight.js/styles/`.","symbol":"CSS Theme","correct":"import 'highlight.js/styles/default.css'"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>Code Example: Swift</h1>\n    <highlight language=\"swift\">{{ codeSnippet }}</highlight>\n\n    <h1>Code Example: JavaScript (via prop)</h1>\n    <highlight language=\"javascript\" :code=\"jsCodeSnippet\"></highlight>\n  </div>\n</template>\n\n<script>\nimport hljs from 'highlight.js';\nimport Highlight from 'vue-highlight-component';\n\n// Import a highlight.js theme for styling\nimport 'highlight.js/styles/atom-one-dark.css'; // Or any other theme from highlight.js/styles\n\n// Register Swift language if it's not supported by default\n// This typically requires installing language-specific modules for highlight.js v9.x\ntry {\n  hljs.registerLanguage('swift', require('highlight.js/lib/languages/swift'));\n  hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));\n} catch (e) {\n  console.warn('Could not register language, ensure highlight.js language packages are installed:', e);\n}\n\nexport default {\n  name: 'App',\n  data() {\n    return {\n      codeSnippet: `func greet(person: String) -> String {\n  let greeting = \"Hello, \" + person + \"!\"\n  return greeting\n}`,\n      jsCodeSnippet: `function factorial(n) {\n  if (n === 0) {\n    return 1;\n  }\n  return n * factorial(n - 1);\n}`\n    };\n  },\n  components: {\n    Highlight\n  }\n};\n</script>\n\n<style>\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  margin: 20px;\n  background-color: #282c34;\n  color: #abb2bf;\n}\n\nh1 {\n  color: #61afef;\n  margin-top: 40px;\n}\n\npre {\n  background-color: #21252b;\n  padding: 15px;\n  border-radius: 8px;\n  overflow-x: auto;\n}\n</style>","lang":"javascript","description":"This quickstart demonstrates how to set up and use the `Highlight` component in a Vue 2 application, including registering a custom language and applying a visual theme from `highlight.js`."},"warnings":[{"fix":"For new projects, or to migrate existing ones, use the officially supported `@highlightjs/vue-plugin` for Vue 2 and Vue 3, or a different, actively maintained highlighting solution like `vue-code-highlighter` or `vue-prism-component`.","message":"This package (`vue-highlight-component`) is abandoned and has not been updated in over seven years. It is not compatible with Vue 3 and relies on an outdated version of `highlight.js` (v9.x).","severity":"breaking","affected_versions":"All versions (1.0.0)"},{"fix":"Ensure you `require` and `hljs.registerLanguage()` for every language you intend to highlight, as shown in the quickstart example. Modern `highlight.js` (v11+) has different import paths (`highlight.js/lib/core` and language-specific imports) and common bundles.","message":"The `highlight.js` library (v9.x) used by this component often requires manual registration of specific languages if they are not part of the default bundle. Importing `highlight.js/lib/languages/` for each needed language is necessary.","severity":"gotcha","affected_versions":"All versions (1.0.0)"},{"fix":"Add an `import 'highlight.js/styles/<theme-name>.css'` statement in your main JavaScript file or a component's style block (if using a pre-processor that handles CSS imports) to apply a theme. Examples include `default.css`, `atom-one-dark.css`, etc.","message":"Visual styling for the highlighted code is not included by the `vue-highlight-component` itself. A `highlight.js` CSS theme file must be imported separately into your project.","severity":"gotcha","affected_versions":"All versions (1.0.0)"},{"fix":"Use `@highlightjs/vue-plugin` which provides separate versions for Vue 2 (v1.x) and Vue 3 (v2.x) to ensure full compatibility with your Vue version.","message":"This component is designed for Vue 2. Attempting to use it directly in a Vue 3 application will likely result in compatibility issues or errors due to changes in Vue's API and component instantiation.","severity":"gotcha","affected_versions":"All versions (1.0.0)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Import the language module and register it using `hljs.registerLanguage('<language-name>', require('highlight.js/lib/languages/<language-name>'))`.","cause":"The specific highlighting language required was not registered with `highlight.js`.","error":"Error: Unknown language: <language-name>"},{"fix":"Add an `import 'highlight.js/styles/default.css'` (or your preferred theme) statement in your main application entry file (e.g., `main.js`) or a global style sheet.","cause":"No `highlight.js` CSS theme has been imported into the project.","error":"Highlighted code appears unstyled (no colors, just plain text)."},{"fix":"Verify that your project is indeed Vue 2. If it's Vue 3, switch to `@highlightjs/vue-plugin` (v2.x) or another Vue 3-compatible highlighting library.","cause":"This error often occurs when a Vue 2 component is used in a Vue 3 application or when a component's definition is incorrectly imported or registered.","error":"[Vue warn]: Failed to mount component: template or render function not defined."}],"ecosystem":"npm"}