mattmakai / gitbook-plugin-code-highlighter

GitBook plugin. Highlight specific lines in code blocks.
MIT License
4 stars 1 forks source link

Unable to highlight lines in Asciidoc project #1

Open bweir opened 8 years ago

bweir commented 8 years ago

Hi there,

I'm setting up this plugin for the first time and not having much luck with it. I'm using Asciidoc and I'm just getting &&& in the output, with no evidence that the line highlighter is even turning on.

Here is the code I want to highlight:

----
DAT
    dot_gfx
&&&    word    0
&&&    word    2, 2
&&&    word    %%11
&&&    word    %%11
----

Here's the result:

<div class="listingblock">
<div class="content">
<pre>DAT
    dot_gfx
&amp;&amp;&amp;    word    0
&amp;&amp;&amp;    word    2, 2
&amp;&amp;&amp;    word    %%11
&amp;&amp;&amp;    word    %%11</pre>
</div>

Here's my book.json

{
    "plugins": [
        "-highlight",
        "code-highlighter",
        "exercises"
    ],
    "pluginsConfig": {}
}

What am I doing wrong? Should it be in some other block instead of a listing block? Does this not work with Asciidoc?

You can see the whole project here if that's not enough info: https://github.com/lamestation/lamestation-book

bweir commented 8 years ago

Looks like I may have answered my own question.

Fenced code blocks and indented blocks in markdown generate <pre><code> tags.

<pre><code>DAT
    dot_gfx
<span class="code-line-highlight">    word    0</span>
<span class="code-line-highlight">    word    2, 2</span>
<span class="code-line-highlight">    word    %%11</span>
<span class="code-line-highlight">    word    %%11</span>

</code></pre>

However, but undecorated code blocks in Asciidoc are just regular divs, so the [source] tag must be used.

[source]
----
some code...
----

So feature request! Can this plugin recognize plain Asciidoc listing blocks as code blocks for highlighting? So a pre block inside of div.listingblock? I'm going to be using this syntax all over the place in my book. =O

bweir commented 8 years ago

Also, I am noticing strange behavior with backticks. The <code></code> tags that they are generating are adding spurious newlines, which causes inline code to look strange.

This is the output I am seeing:

<p>Drawing is done with the <code>gfx.Sprite
</code> command. It has four arguments, which control how it will behave.</p>
</div>

Would you know anything about this behavior? Thanks.

mattmakai commented 8 years ago

I didn't test with Asciidoc since I'm using Markdown, so I'm not surprised there are some issues here.

Is [source] the appropriate way to create a code block within Asciidoc? As long as Gitbook recognizes the input as a code block then the plugin should work because this is just a simple hook to add a tag to lines within a code block. Any idea if the "&&&" syntax creates a conflict for Asciidoc?

bweir commented 8 years ago

Well, if you look here, there's actually a number of ways to make a code block using Asciidoc: http://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#source-code

The &&& syntax is fine. I was able to use the plugin after all, but I had to change my code block syntax. It would be nice to be able to use any of the code block syntaxes with this plugin. https://bweir.gitbooks.io/lamestation-book/content/snake/humble-beginnings.html

I am probably going to fiddle around with this plugin because I'd like to extend it for some other applications in my book. :D

mattmakai commented 8 years ago

Yea, there's multiple ways to make a code block in Markdown as well, but why would GitBook only flag some of the Asciidoc code blocks as actual code blocks to process? Otherwise there's no hook for this plugin to know that there's code to process. Let me know how your fiddling goes because I'd love to incorporate a fix for the problem if we can figure it out. Thanks for the heads up!

bweir commented 8 years ago

Well, I dunno. [source] tags and inline literals are the only blocks that seem to generate <code> tags and that seems to be the way it is. The regular literal blocks (----) use <tt> instead of <code>. I don't know how GitBook renders Asciidoc, but I can only assume it uses Asciidoctor because using Asciidoctor directly produced the exact same output.

Well, anyway, fiddling has commenced. I took your plugin and I started making my own plugin from it. I forked it because it went off in its own direction as a Spin highlighter (see the colored block backgrounds), but it allows me to highlight additions, removals, and changes as well.

You can see examples here: https://bweir.gitbooks.io/lamestation-book/content/snake/humble-beginnings.html

Check it out (haven't updated the README) https://github.com/lamestation/gitbook-plugin-spin-highlighter

Would you be interested in feeding some of these changes back into the original plugin?