Vue3: How to use Highlight.js for Solidity code syntax?

Question

I am building a webpage in Vue3. On this webpage I want to display some Solidity code and I would like it to be pretty and highlightend. I found the Highlight.js (link) library. And I also found "rules" for Solidity (link), since solidity doesn't come with highlight.js.

Now, I did got this to work, when I was using Flask (python), but I switched to Vue, and for the love of all that is holy, I can't get it to work now.

So far, I tried following what highlight.js has described on their website, with regards to Vze. But that didn't work. That way didn't even work when using it on "javascript" code and "python" code. The coloring was wrong...

Currently, I import highlight.js in the :

index.html

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />

    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs2015.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

    <script
      type="text/javascript"
      src="/node_modules/highlightjs-solidity/dist/solidity.min.js"
    ></script>
    <!-- <script
      type="text/javascript"
      src="/node_modules/highlightjs-solidity/dist/yul.min.js"
    ></script> -->
  </head>

And then in the Vue Component:

...
mounted() {
    self.hljs.highlightAll();
...

Now, this does work for "javascript" code and "python" code. It also works with random "haskell" code, when I import it in the head:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/haskell.min.js"></script>

But I just can't get it to work with Solidity.

Found a bad workaround (but it works, i guess). Copy the solidity.min.js from node_modules/highlightjs-solidity/dist/solidity.min.js to public/ folder of your Vue app. And then do the import inside the <head> tag like this: <script src="/solidity.min.js"></script> — Yachara
– Yachara, Commented Jan 8, 2023 at 17:54

Live bug help - www.dialect.so · Accepted Answer · 2023-01-08 15:03:51Z

0

It looks like the highlightjs-solidity package isn't compatible with highlight.js version 11 based on this excerpt from the npm package README:

You might have to stay on highlight.js version 10 for Solidity syntax highlighting to work.

answered Jan 8, 2023 at 15:03

Live bug help - www.dialect.so

1,6861 gold badge5 silver badges12 bronze badges

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

1 Comment

Yachara Over a year ago

Nope, this doesn't seem to slove it :/

Collectives™ on Stack Overflow

Vue3: How to use Highlight.js for Solidity code syntax?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related