syntax highlighting with coderay, asciidoctor not working

Issue

I have asciidoctor markdown like so, as described here http://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#source-code

:source-highlighter: coderay
:coderay-css: class
:stylesheet: coderay_railscasts.css.scss

[source,ruby]
.app.rb
----
require 'sinatra'

get '/hi' do
  "Hello World!"
end
----

But my output in the browser isn’t highlighted at all.
The classes haven’t been applied either.

My web developer tools output looks like so:
As you can see, there are no classes applied to the text that should be, according to the documentation

<div class="listingblock">

    <div class="title"></div>
    <div class="content">
        <pre class="highlight">
            <code class="language-ruby" data-lang="ruby">

                require 'sinatra'

                get '/hi' do
                  "Hello World!"
                end

            </code>
        </pre>
    </div>

</div>

So it seems it has failed to apply classes, which may be failing to communicate with coderay, or failing to find the right settings, etc.

I’ve seen this asciidoctor FAQ http://asciidoctor.org/docs/faq/ explaining how you have to tweak some settings, but I it applies when generating html documents from the asciidoctor markdown, not what I’m doing – which is saving markdown text in a database, and having that text get parsed when retrieved. That faq question also seems to assume a file structure and framework that is not rails. So it doesn’t seem to apply to my case.

I am at a loss because I have the correct syntax and settings, but unsure where it is failing, without any means currently to debug or examine where anything is missing or incorrect.

This issue seems to be the exact behavior I’m getting.
https://github.com/asciidoctor/asciidoctor/issues/947

Solution

The call should be either

== Asciidoctor.convert(@article.content, safe: 'safe')

or

== Asciidoctor.render(@article.content, safe: 'safe')

Then you will see styles marked up on your code block content.

If that doesn’t work, also change

[source,ruby]

to

[source,ruby,role="my_css_class"]

The specific value of the html role attribute doesn’t seem to really matter.

Answered By – ahnbizcad

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.