Vuejs3 HighlightJS not showing syntax

Question

Using the below code, I am getting the raw html instead and not formatted syntax. what am I missing?

<script setup>
import hljs from 'highlight.js/lib/core';
import sql from 'highlight.js/lib/languages/sql.js';

hljs.registerLanguage('sql', sql);

const highlightedCode = hljs.highlight(
    'select * from TableName',
    { language: 'sql' }
).value


</script>

<template>
    <pre>
    <code>
        {{ highlightedCode }}
    </code>
  </pre>
</template>

Answer 1

I think you have a problem with the style. You can try again by importing the style file.

For example:

import 'highlight.js/styles/stackoverflow-light.css'

or

import 'highlight.js/styles/github.css';