Syntax Highlighting doesn't work in preview

[AlessandroVol23]

Hi 👋🏽

my syntax highlighting doesn't use my template in the VS Code Preview and looks a bit off:

I'm opening the main entry file main.adoc in a locked preview.
Once I'm exporting it it works properly.
Am I missing any setting or is this a current bug? 🤔

System Info
Version: 1.87.2 (Universal)
Commit: 863d2581ecda6849923a2118d93a088b0745d9d6
Date: 2024-03-08T15:21:31.043Z
Electron: 27.3.2
ElectronBuildId: 26836302
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Darwin arm64 23.3.0

Extension
asciidoctor.asciidoctor-vscode: v.3.2.0

Thanks! 😊

[ggrossetie]

You need to enable syntax highlighting:

:source-highlighter: highlight.js

Having said that, the grey box on top of the code block is unexpected, I will take a look 👀

[AlessandroVol23]

You need to enable syntax highlighting:

:source-highlighter: highlight.js

Having said that, the grey box on top of the code block is unexpected, I will take a look 👀

I do have it activated in the main.adoc

:source-highlighter: rouge

and it also works in the PDF output. It just doesn't work in the preview of VS Code.

If I'm setting this option:

  "asciidoc.preview.useEditorStyle": false

Then I the black box is gone (maybe something with dark mode)?
But I'd like to see it in the preview as it would be in the final pdf.

So, with the option source-highlighter does syntax highlighting works for you in the VS Code preview as well?

Thanks for the fast reply!

[ggrossetie]

Rouge is written in Ruby and is not available in a JavaScript environment. Only Highlight.js is compatible with Asciidoctor.js. You can use a .asciidoctorconfig to configure Highlight.js when using VS code or add it in your settings.json:

    "asciidoc.preview.asciidoctorAttributes": {
        "source-highlighter": "highlight.js"
    }

In theory, we could check if source-highlighter is defined and fallback to Highlight.js in case the syntax highlighter is not available in the VS code environment.

[AlessandroVol23]

Ah that fixed it. Thank you so much! 😊

[ggrossetie]

I'm glad it's working. I'm reopening because I think we can improve things:

• Remove the dark grey box
• Activate Highlight.js syntax highlighter when :source-highlighter: is defined

[AlessandroVol23]

Not sure if this is related to this issue. But now my syntax highlighting works in my preview but not in my generated pdf anymore with highlight.js 🤔

It doesn't work with rogue as well. I can see it in my HTML output but not in my pdf output.
Should create a dedicated issue for that?

Setting in main.adoc

:source-highlighter: highlightjs

Preview:

HTML:

PDF:

Any clue on what I can do here?

[ggrossetie]

Asciidoctor PDF is written in Ruby and does not support Highlight.js. You can use Highlight.js when converting to HTML with Asciidoctor (Ruby) because the syntax highlighting is done client side. Asciidoctor (Ruby) also supports Rouge when converting to HTML. In this case, the syntax highlighting is done during the processing.

As mentioned above, you should use:

    "asciidoc.preview.asciidoctorAttributes": {
        "source-highlighter": "highlight.js"
    }

You can leave :source-highlighter: rouge in your document since it has a lower precedence. With this setting, it should use Highlight.js in the VS code preview and Rouge when converting to HTML/PDF using Asciidoctor (Ruby).

[AlessandroVol23]

Okay that works thanks!