DoIt
DoIt copied to clipboard
Asciidoc documents doesn't generate TOC
This theme is almost perfect, featured, and good looking, unfortunately, there's only the TOC that doesn't with asciidoc posts, the TOC looks simply empty, seems like to be the same issue as in the deprecated loveit bug report: https://github.com/dillonzq/LoveIt/issues/566 (you can see examples and more details about the TOC issue here)
Note: to enable hugo to render asciidoc posts too you must install "ascidoctor" and add this to the config.toml file:
[security.exec]
allow = ["^dart-sass-embedded$", "^go$", "^npx$", "^postcss$", "^asciidoctor$"]
osEnv = ["(?i)^(PATH|PATHEXT|APPDATA|TMP|TEMP|TERM|RUBYLIB)$"]
The reason TOC does not work is because it relies on the .headerLink
class to select all header elements.
https://github.com/HEIGE-PCloud/DoIt/blob/f065e2076c5a85980efe825d1ff35d037c7cfc2a/layouts/_default/_markup/render-heading.html#L17
Ultimately, you want to generate some HTML like this.
<h2 id="_first_section" class="headerLink">First Section</h2>
I am not sure how you can do this with asciidoc...
For the code block, it is the same story, asciidoctor does not generate syntax highlightning by default.
<pre class="highlight">
<code class="language-java" data-lang="java">
@Bean
public MutableAclService mutableAclService() {
JdbcMutableAclService jdbcMutableAclService = new JdbcMutableAclService(datasource, lookupStrategy(), aclCache());
jdbcMutableAclService.setAclClassIdSupported(true); <b class="conum">(1)</b>
jdbcMutableAclService.setClassIdentityQuery("SELECT @@IDENTITY"); <b class="conum">(2)</b>
jdbcMutableAclService.setSidIdentityQuery("SELECT @@IDENTITY"); <b class="conum">(3)</b>
return jdbcMutableAclService;
}
</code>
</pre>
It has to tokenize and generate syntax highlighting somehow for the CSS style to apply.
Ultimately, you want to generate some HTML like this.
<code class="language-java" data-lang="java"><span class="line"><span class="cl"><span class="nd">@Bean</span>
</span></span><span class="line"><span class="cl"><span class="kd">public</span> <span class="n">MutableAclService</span> <span class="nf">mutableAclService</span><span class="o">()</span> <span class="o">{</span>
</span></span><span class="line"><span class="cl"> <span class="n">JdbcMutableAclService</span> <span class="n">jdbcMutableAclService</span> <span class="o">=</span> <span class="k">new</span> <span class="n">JdbcMutableAclService</span><span class="o">(</span><span class="n">datasource</span><span class="o">,</span> <span class="n">lookupStrategy</span><span class="o">(),</span> <span class="n">aclCache</span><span class="o">());</span>
</span></span><span class="line"><span class="cl"> <span class="n">jdbcMutableAclService</span><span class="o">.</span><span class="na">setAclClassIdSupported</span><span class="o">(</span><span class="kc">true</span><span class="o">);</span> <span class="o"><</span><span class="n">1</span><span class="o">></span>
</span></span><span class="line"><span class="cl"> <span class="n">jdbcMutableAclService</span><span class="o">.</span><span class="na">setClassIdentityQuery</span><span class="o">(</span><span class="s">"SELECT @@IDENTITY"</span><span class="o">);</span> <span class="o"><</span><span class="n">2</span><span class="o">></span>
</span></span><span class="line"><span class="cl"> <span class="n">jdbcMutableAclService</span><span class="o">.</span><span class="na">setSidIdentityQuery</span><span class="o">(</span><span class="s">"SELECT @@IDENTITY"</span><span class="o">);</span> <span class="o"><</span><span class="n">3</span><span class="o">></span>
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="n">jdbcMutableAclService</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="o">}</span>
</span></span></code>
After doing some tests and reading some things on google I found how the TOC Asciidoc can be generated, it basically needs these entries:
---
title: "Introduction test"
(etc)...
toc:
auto: false <-- important, needs to be false
---
:toc:
// Set toclevels to be at least your hugo [markup.tableOfContents.endLevel] config key
:toclevels: 3
== Introduction
Foo bar wombat
=== Subsection
Foo bar
== Next chapter
Hello world
About the syntax highlighting, I'm reading this howto which seems like to make it working is needed that the theme supports highlight.js , which syntax theme DoIt uses?
For the toc, yes you do need to first enable it in this way. But this does not solve all the problems, the generated toc will not be responsive to scrolling as reported here #566. The reason is because the CSS and JavaScript code uses a class selector .headerLink
to grab the headings and render them correctly, but the headings generated by asciidoc does not contain this class. I wonder whether there is an easy way in asciidoc to customize this behavior. But it is always possible for me to tweak around the JavaScript and CSS code to make them directly select headings, and hopefully without bringing in any side effects.
For syntax highlighting, there are two ways of implementation, client-side rendering and server-side rendering, you can read about a more detailed explanation here. But essentially, Hugo has a very good code highlighter built-in, so the syntax highlighting for DoIt is done on server side (when you run hugo
). I wonder if it is possible to achieve similar things for asciidoc. Again, it is always possible to introduce something like highlight.js to do the syntax highlighting on the client side, but it is less ideal as it adds extra loading and rendering time for the user.