Vue Highlight Component

Common errors

• Error: Unknown language: <language-name>

  cause The specific highlighting language required was not registered with `highlight.js`.
  fix Import the language module and register it using `hljs.registerLanguage('<language-name>', require('highlight.js/lib/languages/<language-name>'))`.

• Highlighted code appears unstyled (no colors, just plain text).

  cause No `highlight.js` CSS theme has been imported into the project.
  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.

• [Vue warn]: Failed to mount component: template or render function not defined.

  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.
  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.

Warnings

• breaking 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).
  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`.
• gotcha 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-highlight-component npm
• yarn add vue-highlight-component yarn
• pnpm add vue-highlight-component pnpm

Imports

• Highlight
  wrong:

  import { Highlight } from 'vue-highlight-component'

  correct:

  import Highlight from 'vue-highlight-component'

  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.
• hljs
  wrong:

  const hljs = require('highlight.js')

  correct:

  import hljs from 'highlight.js'

  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`.
• CSS Theme

  import 'highlight.js/styles/default.css'

  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/`.

Quickstart

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`.

<template>
  <div id="app">
    <h1>Code Example: Swift</h1>
    <highlight language="swift">{{ codeSnippet }}</highlight>

    <h1>Code Example: JavaScript (via prop)</h1>
    <highlight language="javascript" :code="jsCodeSnippet"></highlight>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import Highlight from 'vue-highlight-component';

// Import a highlight.js theme for styling
import 'highlight.js/styles/atom-one-dark.css'; // Or any other theme from highlight.js/styles

// Register Swift language if it's not supported by default
// This typically requires installing language-specific modules for highlight.js v9.x
try {
  hljs.registerLanguage('swift', require('highlight.js/lib/languages/swift'));
  hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
} catch (e) {
  console.warn('Could not register language, ensure highlight.js language packages are installed:', e);
}

export default {
  name: 'App',
  data() {
    return {
      codeSnippet: `func greet(person: String) -> String {
  let greeting = "Hello, " + person + "!"
  return greeting
}`,
      jsCodeSnippet: `function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}`
    };
  },
  components: {
    Highlight
  }
};
</script>

<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 20px;
  background-color: #282c34;
  color: #abb2bf;
}

h1 {
  color: #61afef;
  margin-top: 40px;
}

pre {
  background-color: #21252b;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
}
</style>