How to have Atom's rendering layout?

[Foadsf]

First of all thanks for the great job. After some research I think this addon is a very good AsciiDoc viewer so far and I want to suggest it as the recommended viewer for my library. The reasons it is better than VSCode and Atom live preview:

• It is just a viewer and there is no risk of the user messing up the code accidentally.
• it shows the collapsible part as discussed here.
• everyone has a browser and there is no need for the user to install other software
• it does render the files with other extensions (I have only tried this through the include syntax)

However I have some issues:

• the collapsible part doesn't have the arrow, for example in VSCode:

• The include syntax doesn't work properly. It just puts a link to the included file.

• The syntax highlighting inside the code blocks does not work properly. Atom's addon is great in that regard.

• and finally the layout for code blocks is not emphasized enough. It would be great if you could add the Atom's layout with the dark code blocks:

Relevant discussion here on VSCode repo and here on Atom's repo.

[Foadsf]

A comparison between different options so far:

	Color layout	Syntax highlighting	Collapsible	Include	Other file extensions	Relevant discussion
Atom	✔️	✔️	❌	✔️	❌	here
VSCode	❌	❌	✔️	✔️	❌	here
Browser	❓ ✔️	❌	❓✔️	✔️	❓❌	here

[ggrossetie]

Hello again @Foadsf 😉

The include syntax doesn't work properly. It just puts a link to the included file.

I think you need to set the safe mode to "safe" (or "unsafe") in the extension options.
Right click on the extension icon > Options.

The syntax highlighting inside the code blocks does not work properly. Atom's addon is great in that regard.

Syntax highlighting should work when safe mode is "safe" (or "unsafe"). You also need to enable syntax highlighting by setting the :source-highlighter: attribute.

and finally the layout for code blocks is not emphasized enough. It would be great if you could add the Atom's layout with the dark code blocks:

In the option pane you can change the theme and/or add custom stylesheets to change the code layout.

the collapsible part doesn't have the arrow, for example in VSCode:

Could you please post a screenshot ?

[ggrossetie]

Here's how the collapsible part renders on my browser:

[Foadsf]

oh hey, nice to see same great people are taking care of this plugin too :)

I think you need to set the safe mode to "safe" (or "unsafe") in the extension options.
Right click on the extension icon > Options.

This on Google Chrome. On Firefox Open Menu > Add-ons > Extensions > Options :

Syntax highlighting should work when safe mode is "safe" (or "unsafe"). You also need to enable syntax highlighting by setting the :source-highlighter: attribute.

I tried all options coderay, highlightjs, prettify, and pygments none changed anything. vscode also has the same issue! Atom's syntax highlighting is OK by default.

In the option pane you can change the theme and/or add custom stylesheets to change the code layout.

WOW! these are awesome. I wish they existed on Atom and VSCode! I'm going with foundation-lime, though it is not exactly as nice as Atom's default. Any way i can export than and import it here?

Could you please post a screenshot ?

Here on the Atom's post I have compared them all. Basically the black arrow next to the Click to see the source code is not shown on Firefox:

[ggrossetie]

I tried all options coderay, highlightjs, prettify, and pygments none changed anything. vscode also has the same issue! Atom's syntax highlighting is OK by default.

Here's the languages supported out-of-the-box: https://github.com/asciidoctor/asciidoctor-browser-extension/blob/master/src/js/highlight.js
If you are using another language, then again you can provide your own JavaScript and Stylesheet.

WOW! these are awesome. I wish they existed on Atom and VSCode! I'm going with foundation-lime, though it is not exactly as nice as Atom's default. Any way i can export than and import it here?

Not really but you can get the files from this repository: https://github.com/asciidoctor/asciidoctor-browser-extension/tree/master/app/css/themes

Here on the Atom's post I have compared them all. Basically the black arrow next to the Click to see the source code is not shown on Firefox:

It's a style issue on Firefox (not related to this extension).
Asciidoctor default stylesheet is using Foundation 4.3.2 and Foundation is using Normalize 2.1.2 which wrongly uses a display: block on summary element. The correct display should be display: list-item.
This issue is already fixed in the latest normalize release: https://github.com/necolas/normalize.css/blob/master/normalize.css#L329

In short you should open an issue here: https://github.com/asciidoctor/asciidoctor-stylesheet-factory

[Foadsf]

Dear @Mogztter I really appreciate your kind support. You guys are true heroes to provide users with such a nice software just for the love of it :)

Here's the languages supported out-of-the-box: https://github.com/asciidoctor/asciidoctor-browser-extension/blob/master/src/js/highlight.js

The language I am using is Scilab which is indeed in the list of highlightjs. besides the syntax is shown ok on Atom:

this is lovely! but on FireFox:

still lovely but no syntax highlighting :(

Not really but you can get the files from this repository: https://github.com/asciidoctor/asciidoctor-browser-extension/tree/master/app/css/themes

It would be great if these three projects (Atom, VSCode and browser addons) could have a same repository for themes. Is this technically possible?

[mojavelinux]

The language I am using is Scilab which is indeed in the list of highlightjs

Asciidoctor's integration with highlight.js does not load all the languages by default. It only loads the languages that are included in the common set. There's an open issue to be able to configure additional languages. See asciidoctor/asciidoctor#3036

[Foadsf]

@mojavelinux strange thing is that Atom has the proper syntax highlighting but the browser addon and vscode don't!

[mojavelinux]

As I've already explained, these are two separate things. The editor is a completely different technology stack than the preview window. The preview window relies on the syntax highlighting integration provided by Asciidoctor. The default is highlight.js. The linked issue details why not all the languages are loaded by default.

[mojavelinux]

Asciidoctor default stylesheet is using Foundation 4.3.2 and Foundation is using Normalize 2.1.2 which wrongly uses a display: block on summary element. The correct display should be display: list-item.

Nice investigative work! I've submitted a PR to fix this. See asciidoctor/asciidoctor#3156

[ggrossetie]

As a workaround, you can do the following:

1. Go to https://highlightjs.org/download/
2. Check Scilab and every languages you want to use
3. Click "Download"
4. Unarchive and extract the "highlight.pack.js" file
5. Edit the "highlight.pack.js" file and add the following content at the end of the file and save:

document.querySelectorAll('pre.highlight > code').forEach((block) => {
  hljs.highlightBlock(block);
});

6. Open the extension "Options" page
7. In the JavaScript section, click the "Add a JavaScript" button
8. Select the "highlight.pack.js" file (modified at step 5)
9. Select 'Load the JavaScript after..." (if that's not already the case)
10. Refresh your page
11. 🎉

[Foadsf]

@Mogztter awesome. This solved the problem. It would be great if there would be an option on the extension page to select the languages we want and it automatically pull them from the highlightjs. Thanks a lot.

[ggrossetie]

Can I close this issue ? I like when an issue only contains a single element so it's easier to focus on one task.

For my point of view, the only remaining tasks are:

• Update the default stylesheet ("asciidoctor.css") to properly render details element on Firefox
• Implement Load grammar for additional source languages as defined by highlightjs-languages asciidoctor#3036 to automatically load additional source languages

Did i forget something ?

[Foadsf]

@Mogztter I have listed all of the issues in this table. For the moment I have some workarounds. Looking forwards to those pull request. Thanks for your awesome support again.

[ggrossetie]

With the latest version it's now possible to load grammar for additional source languages as defined by highlightjs-languages attribute.

@Foadsf If I missed something, please open a new issue with a single feature request or issue so we can address it.