source highlights

[ovione]

Is there a way to generated html with source highlighted ?

I run from npm the script:

const glob = require('glob');
const asciidoctor = require('asciidoctor.js')();

const pathToAdoc = path.join(__dirname, 'generators', 'doc', 'templates');

glob('**/*.adoc', {cwd: pathToAdoc}, function (err, files) {
    files.forEach(function(adocfile) {
        var pathToFile = path.join(pathToAdoc, adocfile);
        asciidoctor.convertFile(pathToFile, 
                                {   safe: 'safe', 
                                    attributes: {showtitle: true, icons: 'fonts'},
                                    header_footer: true});
    });
});

I use pygments in my adoc document like:

:source-highlighter: pygments
:pygments-css: class

I want to highlithy typescript like

[source, typescript]
----
import { Component } from '@angular/core';
import { environment } from '../../environments/environment';

@Component({
  templateUrl: 'about.component.html',
  styleUrls: ['about.component.css']
})
export class AboutComponent {
  public version: string = environment.VERSION;
  public contextRoot: string = environment.CONTEXT_ROOT;

  constructor() {}

}
----

I have the following error

Pygments: uninitialized constant Pygments

If someone could give me the solution that would be great

thanks O

[mojavelinux]

Only client-side source highlighting is supported in Asciidoctor.js at the moment.

[ggrossetie]

I think it should be relatively easy to use the highlight.js API on a post-processing task or in an extension:

• http://highlightjs.readthedocs.io/en/latest/api.html#highlightblock-block
• http://highlightjs.readthedocs.io/en/latest/api.html#highlight-name-value-ignore-illegals-continuation

[mojavelinux]

I'm mostly interested in getting highlights integrated, which is the syntax highlighter used in Atom. We already know that one works at build time. The problem I ran into is that the languages are not all available on npmjs. But the core is, it's possible to get started with the integration.

[ggrossetie]

I'm most interested in getting highlights integrated, which is the syntax highlighter used in Atom. We already know that one works at build time.

highlights looks interesting but as far as I know it will only work in a Node.js environment (or at least the integration will not be easy in a browser because it has a few dependencies... especially https://yarnpkg.com/en/package/fs-plus)

it's possible to get started with the integration.

Do you think we should add a special case in substitutors#highlight_source and delegate the work to Asciidoctor.js ?

[mojavelinux]

highlights looks interesting but as far as I know it will only work in a Node.js environment

Exactly. But we don't need it in the browser because the browser can already use client-side highlighting. We just need a mode for when using Asciidoctor.js in a build environment (build time).

[mojavelinux]

Do you think we should add a special case in substitutors#highlight_source and delegate the work to Asciidoctor.js ?

That needs to be made into an extension point in general. That will solve the various request we've had. We need something akin to the converter where you can register the highlighter and it has an API.

[ggrossetie]

We need something akin to the converter where you can register the highlighter and it has an API.

YES! a big thumbs up! 👍

[ggrossetie]

Upstream issue: https://github.com/asciidoctor/asciidoctor/issues/2106

[ggrossetie]

Just found out that @jirutka is working on an extension to highlight source block during document conversion: https://github.com/jirutka/asciidoctor-highlight.js

So he might have ideas on how to shape this API.

[jirutka]

asciidoctor-highlight.js is finished, I'm gonna use it in production very soon.

The main parts of asciidoctor-highlight.js are based on asciidoctor-rouge and rewritten into JS. The most interesting part is CalloutsSubstitutor. It basically reimplements the substitution logic that is buried inside Asciidoctor.

There's also problem with Document#find_by that does not dive into tables, so I have to use this workaround.