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>

Tanzer Atay · Accepted Answer · 2023-08-24 08:55:28Z

0

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';

answered Aug 24, 2023 at 8:55

Tanzer Atay

1364 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs3 HighlightJS not showing syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related