Rendering html generated by asciidoc

Using Ghost
1

I’m a long time asciidoc user (15 years or so) and I’d like to load HTML generated from my asciidoc files into a post in ghost. The asciidoc file is in a gh-pages branch in github ( articles/1.html at gh-pages · sashang/articles (github.com))

I load it into an HTML container on the Ghost page using jquery.

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <div id='my-content'>      
    </div>
    <script>
        $( "#my-content" ).load( "https://raw.githubusercontent.com/sashang/articles/gh-pages/bash-0-to-100/2.html" );
    </script>

You can see the result here:

hello world (tiny-thoughts.ghost.io)

Unfortunately, there are some CSS issues. For example, the NOTE, WARNING, INFO callouts aren’t rendered correctly. The stylesheet used is asciidoctor-skins/adoc-github.css at gh-pages · darshandsoni/asciidoctor-skins. Changing the stylesheet used results in more collisions with the existing theme that Ghost runs.

What’s the best way to resolve this? Get good with CSS and make my own custom stylesheet?

2

I don’t know what the answer is, but some possibly ignorant remarks:

  1. This seems very doable - asciidoc is designed to create renderable HTML, so it should just be a matter of importing it correctly. Hopefully someone has already figured out the tricky bits.
  2. You’re using load to import an entire HTML page. I think load strips out everything except the content of the <body> tags, which is normally what you want, but in this case you might be losing important elements that should be re-inserted elsewhere. It might be easier to import the whole html file into an iframe instead - the benefit is that the html will be rendered complete; the drawback is that it will have it own style and not be aware of the styles in the surrounding page.
  3. The page you’re importing looks to have a corrupt <style> element - the contents appear to be a complete html file, not CSS. Can be seen pretty clearly here.
  4. The CSS you reference doesn’t appear to have styles for the callout elements. It styles things like .admonitionblock td.icon .icon-note, but the html itself has elements like <div class="admonitionblock note">.
  5. The challenge of importing a CSS file and having it clash with you existing styles is a real struggle I find. To avoid the messiness of managing the conflicts yourself, I think there’s two options: import the html and css holus-bolus into an iframe so it appears as per the original; or find a css which only styles the elements specific to the asciidoc. This is where you might hope that the community has already done the hard work for you!
1 Like
3

Thanks. That was great. I ended up using iframes and JS. JS to fetch the content and stick it in an iframe. I’m not much of a web developer so there were a few days of frustration over 10 lines of JS to get what I wanted but it was a good learning experience nevertheless.

I’ve posted the code below if someone wants to see how I do it.

<iframe title='my-asciidoc-content' id='my-asciidoc-content'>
</iframe>

<script>
	window.fetch(
        "https://raw.githubusercontent.com/sashang/articles/gh-pages/bash-0-to-100/2.html", {
    method: 'GET',
    accept: 'text/html',
    mode: 'cors'
	})    
.then(async(data) => {
    var response = await data.text();
    var iframe = document.getElementById('my-asciidoc-content');
    // Adjusting the iframe height onload event
    iframe.onload = function(){
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';}
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(response);
    iframe.contentWindow.document.close();
    });
</script>

You can see the result at if statements (tiny-thoughts.ghost.io)

Anyway, this is great. I’ve got a workflow I’m happy with (i…e write asciidoc → push to github → updates appear on my site). I can start publishing all over a decade worth of stuff here.

I also want to pull down my answers from StackOverflow and link them here somehow. I’ll have to look into that someday. And maybe usenet, if I can find an archive of the cpp group…