CODEWITHSUNDEEP
asciidoc
Naresh Chaurasia
Naresh Chaurasia

Reputation: 469

How to collapse heading in ascii doc file

I have following file as adoc file.

= Template
:toc: left
:toclevels: 5
:sectnums:
:sectnumlevels: 5


== Course1

=== Section 1

This is section 1

=== Section 2

This is section 1

== Course2

=== Section 1

This is section 1

=== Section 2

This is section 1

I have installed asciidoc pluging in my chrome and when I open the file in chrome, it looks like this:

enter image description here

Some of the files are very big, and also the Table of Content has become huge.

Question: Is there a way to click on lets say Course2, and the sections under that would collapse, and expand if I click on it again.

I have tried the following link: How to collapse TOC(table of contents) in spring RestDoc (asciidoc)? and few other resources on internet but not much luck.

Please guide.

Thanks.

Upvotes: 1

Views: 896

Answers (2)

Kiroul
Kiroul

Reputation: 535

This is not a problem with the Syntax itself but with the way you display the file.

If you have huge AsciiDoc files and need a good way to display them I would encourage you to check Antora, it generates a static website out of your AsciiDoc files in a very clear and organized way. You get by default this collapsing table of content on the left, you can check the default look in their documentation.

It changes the way you need to organize your documents and is a bit bit of work for the installation but the result is great.

Upvotes: 0

eskwayrd
eskwayrd

Reputation: 4521

The main difference between the RestDoc solution and your current situation is the technique required to load the custom JavaScript.

In the RestDoc solution, the technique is to use docinfo files which get loaded during the execution of asciidoctor. See https://docs.asciidoctor.org/asciidoctor/latest/docinfo/ for more details.

When you use the Asciidoctor.js extension, you have to configure the extension to explicity load the custom javascript. The extension doesn't have access to the filesystem, so it can't look for JavaScript automatically. You have to load custom JavaScript into the extension itself.

Right-click the extension icon in the Chrome button bar, and select "Options". In the "Asciidoctor.js Live Preview" options pane, scroll to the bottom and click "Add a JavaScript...". The JavaScript you add needs to be in a file in your computer's file system. Once added, you can use the radio buttons at the bottom to select when the script runs.

Your browser's developer tools console will show any errors or console.log output from your added JavaScript code, which can be very helpful if there are problems.

Upvotes: 0

Related Questions