asciidoctor / asciidoctor-reveal.js

:crystal_ball: A reveal.js converter for Asciidoctor and Asciidoctor.js. Write your slides in AsciiDoc!
http://asciidoctor.org
Other
287 stars 189 forks source link

Highlight Lines in Source disables syntax colouring #525

Open abul4fia opened 5 months ago

abul4fia commented 5 months ago

I don't know if I'm doing something wrong. My setup is:

:source-highlighter: highlightjs
:revealjsdir: https://cdn.jsdelivr.net/npm/reveal.js@4.4.0
:revealjs_theme: white

If I wrote code such as:

=== Example

[source,c]
----
#include <stdio.h>

int main() {
    printf("Hello\n");
    return 0;
}
----

then all works as expected, and I get coloured syntax in the slide:

image

But if I try to highlight one line:

=== Example

[source,c, highlight=4]
----
#include <stdio.h>

int main() {
    printf("Hello\n");
    return 0;
}
----

Then two unexpected things happen:

  1. Lines are suddenly numbered
  2. Syntax colouring disappears. Everything is gray
image

I'm using

Asciidoctor reveal.js 5.1.0 using Asciidoctor 2.0.18 [https://asciidoctor.org]
Runtime Environment (ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-linux-gnu]) (lc:UTF-8 fs:UTF-8 in:UTF-8 ex:UTF-8)

I'm I doing something wrong? Is this a known issue? I was unable to find anything...

ggrossetie commented 5 months ago

Lines are suddenly numbered

Did you try to enable line numbering? https://docs.asciidoctor.org/asciidoc/latest/verbatim/source-highlighter/#enable-line-numbering

Line numbering is not enabled by default.

[%linenums,ruby]
----
puts 1
puts 2
puts 3
----

Syntax colouring disappears. Everything is gray

Are you using a custom CSS.

Godin commented 5 months ago

FWIW

if I try to highlight one line

  1. Lines are suddenly numbered

this is not specific to Asciidoctor and a kinda feature of reveal.js itself - line numbers and lines highlighting are controlled by the same data-line-numbers, see https://revealjs.com/code/#line-numbers-%26-highlights

You can enable line numbers by adding data-line-numbers to your \<code> tags. If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute.

however one can hide line numbers using custom CSS

.hljs-ln-numbers {
  display: none;
}
  1. Syntax colouring disappears.

seems to be specific to Asciidoc when # presented in code block