Syntax highlighting features (line number, line highlight)

[azzamsa]

Hi.

Coming from Consider Using Asciidoctor for Your Next Presentation. I want to consider asciidoctor-web-pdf as a tool for my next presentation.

Some basic question I want to ask:

1. Is there any plan to support highlighting specific lines of code?
2. and, a line number in the code?
3. I saw the hightlight.js doesn't highlight many basic keywords. Is this expected?

hightlight.js:

Pygments:

---

Sorry for asking such type of question here. Since asciidoctor-web-pdf doesn't have IRC/discord.
If this un-appropriate. I will close and open each question in each issue.

Thank you for asciidoctor-web-pdf

[ggrossetie]

Hey!

I just enabled GitHub discussions, it will be a good opportunity to evaluate this feature 😉

I saw the hightlight.js doesn't highlight many basic keywords. Is this expected?

Since you are using a custom converter (examples/slides/template.js) you can use a different syntax highlighter (client-side).
Here's the result, with the latest version of Highlight.js v10.5.0:

As you can see, this version correctly highlights the keyword range.
To upgrade the version, you need to replace 9.13.1 by 10.5.0:

https://github.com/Mogztter/asciidoctor-web-pdf/blob/8420eeda8184a5136956369466d2d634d0318c8d/examples/slides/template.js#L109-L110

Is there any plan to support highlighting specific lines of code?
and, a line number in the code?

As far as I know, Highlight.js does not support such features by default but you can find community plugins maintained by the community:

• https://github.com/wcoder/highlightjs-line-numbers.js/
• https://github.com/TRSasasusu/highlightjs-highlight-lines.js

Please note that you will need to adjust the HTML generated to accommodate these plugins.

You can also take a look at https://prismjs.com/ which has a Line Highlight plugin and a Line Numbers plugin.
Again, you will need to adjust the HTML generated to be compatible with Prism.js.
For instance, the following definition:

[source,python,,linenums,highlight="1,4"]
----
...
----

should generate something like:

<pre class="line-numbers" data-line="1,4">
<code class="language-python">...</code>
</pre>

to be compatible with Prism.js.

I hope it helps,
Guillaume

[azzamsa]

I just enabled GitHub discussions, it will be a good opportunity to evaluate this feature 😉

nice :)

I want to make "templates" for the common part of my slide. Such as code highlight line, profile page, and big text in the center. I still don't find them in ioslides example. So I begin with code highlight. In the end, I will create a blog post so that it makes it easier for newcomers.

---

You can also take a look at prismjs.com which has a Line Highlight plugin and a Line Numbers plugin.

I use prism.js in my eleventy blog. Sadly, it's a plugin, So I don't have deep knowledge of how it works.

I've changed highlight.js to prism.js

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
-<script>
-hljs.initHighlightingOnLoad();
-</script>
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-css.min.js">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
+

the code block doesn't get highlighted. So I add prism theme

+<link href="${__dirname}/styles/theme.css" rel="stylesheet">

The strange thing is: I don't see the resulting HTML has a token keyword. So it doesn't get highlighted.

(the code block in my blog, has a token keyword)

Because I see prism.js theme use that for highlighting

---

Anyways, any reason why asciidoctor-web-pdf doesn't "support" prism.js? It has many features compared to highlight.js.

[ggrossetie]

I want to make "templates" for the common part of my slide. Such as code highlight line, profile page, and big text in the center. I still don't find them in ioslides example. So I begin with code highlight.

If you want to create a custom converter (using templates) you will need to get familiar with Asciidoctor AST.
The basic idea is to assign a role to a block. In the following example, I'm using an open block:

== About me

[.about]
--
- Guillaume
- @mogztter
--

Then, you can override how an open block with the role about is converted to HTML.
You should read the documentation to learn more about extending the default HTML 5 converter: https://github.com/mogztter/asciidoctor-web-pdf#custom-layout
I would recommend to start by providing custom styles to make it look as you want. It would be easier to get started 😉

In the end, I will create a blog post so that it makes it easier for newcomers.

That would be great 🙏
I'm really thankful that @matklad took the time to write a blog post about Asciidoctor Web PDF!

Anyways, any reason why asciidoctor-web-pdf doesn't "support" prism.js? It has many features compared to highlight.js.

You forgot to add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-python.min.js"></script>

As far as I know, prism.min.js does not include Python language by default.

Alternatively, you can use:

<link href="https://unpkg.com/prismjs@1.23.0/themes/prism.css" rel="stylesheet" />
<script src="https://unpkg.com/prismjs@1.23.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>

The autloader plugin will automatically loads languages when necessary.
Reference: https://prismjs.com/#basic-usage-cdn

[azzamsa]

Alternatively, you can use.

Wow, works great.

Now, I need to learn how to nightlight only a specific line. I will play with "inspect element".

Thank you for your time and patience.
Thanks for asciidoctor-web-pdf

[azzamsa]

To use prism.js for highlighting. Use:

<link href="https://unpkg.com/prismjs@1.23.0/themes/prism.css" rel="stylesheet" />
<script src="https://unpkg.com/prismjs@1.23.0/components/prism-core.min.js"></script>
<script src="https://unpkg.com/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>

To highlight specific line. Add:

<link href="https://unpkg.com/prismjs@1.23.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" />
<script src="https://unpkg.com/prismjs@1.23.0/plugins/line-numbers/prism-line-numbers.min.js"></script>       

Then add data-line="<line number>" to the pre tag. But the highlight sometimes misaligned. Adjust the corresponding line-height

To add line numbers:

<link href="https://unpkg.com/prismjs@1.23.0/plugins/line-highlight/prism-line-highlight.css" rel="stylesheet" />
<script src="https://unpkg.com/prismjs@1.23.0/plugins/line-highlight/prism-line-highlight.min.js"></script>

Then add line-numbers to the pre tag. It does move the code to the left. But the line number doesn't show up. I am searching for a fix to show the line numbers.

My mwe:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link href="slide-test/styles/asciidoctor.css" rel="stylesheet">
    <link href="slide-test/styles/main.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://unpkg.com/prismjs@1.23.0/themes/prism.css" rel="stylesheet" />
    <script src="https://unpkg.com/prismjs@1.23.0/components/prism-core.min.js"></script>
    <script src="https://unpkg.com/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>

    <link href="https://unpkg.com/prismjs@1.23.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" />
    <script src="https://unpkg.com/prismjs@1.23.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

    <link href="https://unpkg.com/prismjs@1.23.0/plugins/line-highlight/prism-line-highlight.css" rel="stylesheet" />
    <script src="https://unpkg.com/prismjs@1.23.0/plugins/line-highlight/prism-line-highlight.min.js"></script>


  </head>
  <body>
    <section class="title slide">
      <header>
        <h1>Slide 101</h1>
        <h2>A  test</h2>
      </header>
      <footer>
        <p class="author">Azzam S.A</p>
      </footer>
    </section>
    <section class="slide " data-slide-number="1" data-slide-count="1" >
      <h2>Python</h2>
      <div class="listingblock">
        <div class="content">
          <pre class="highlight"><code class="language-python" data-lang="python">def greet(name):
              print(f"hi {name}")</code></pre>
        </div>
      </div>
    </section>
  </body>

[ggrossetie]

Thanks for sharing.
It might be a conflict with asciidoctor.css or main.css.
Here's what I get without these style sheets:

For reference, here's the HTML:

<div class="listingblock">
  <div class="content">
  <pre class="highlight line-numbers" data-line="1"><code class="language-python" data-lang="python">def greet(name):
              print(f"hi {name}")</code></pre>
  </div>
</div>

[matklad]

FWIW, when I’ve looked at this (a long time ago) I tried various syntax highlighters and ended up just writing a simple lexer myself instead: https://github.com/matklad/rust-course/blob/master/lectures/template.js#L66.

For my blog (which uses Ruby version of asciidoctor), the rouge syntax highlighter works well.

It does feel like “I want to do syntax highlighting during the build process, in template.js” bit is missing from js tool chain (but maybe “just do it at render time in the browser” is the right call)

[ggrossetie]

It does feel like “I want to do syntax highlighting during the build process, in template.js” bit is missing from js tool chain

Actually, you can do build-time syntax highlighting. Asciidoctor now provides a Syntax Highlighter Adapter: https://docs.asciidoctor.org/asciidoctor/latest/syntax-highlighting/custom/

You can take a look at: https://github.com/oncletom/asciidoctor-prism-extension

(but maybe “just do it at render time in the browser” is the right call)

Both approaches have benefits and drawbacks but I tend to prefer build-time syntax highlighting.