middleman/middleman-asciidoc

Tip/Note images not rendered?

fredkelly opened this issue · 6 comments

Probably a stupid one but I'm scratching my head trying to work out how to get the Tip/Note images to render. Right now I'm using the default CSS file which is producing textual output for these elements (see here: https://www.apachefriends.org/docs/hosting-xampp-on-azure.html).

I can see in the example asciidoc pages (below) that these images are rendered with <img/> tags, so I'm guessing it's not just a case of missing CSS.

Thanks

screen shot 2014-12-31 at 3 45 41 pm

Is the source to this website available somewhere for me to test?

In order to get the icons, you need to pass the AsciiDoc attribute icons to the document. Add this to your middleman config as follows:

set :asciidoc_attributes, %w(icons)

or

set :asciidoc_attributes, %w(icons=font)

If you set the icons value to blank, it will look for icon images (see the HTML path for where these need to be located). If you set it to font (preferred), then it will use font-based icons. In order for those to work, you need to load the appropriate styles, which you can get from the Asciidoctor stylesheet and the Font Awesome stylesheet (you need both).

I'll update the Middleman AsciiDoc example to show how this is done.

https://github.com/opendevise/middleman-asciidoc-example

I should clarify that admonition icons is a feature of AsciiDoc that relies on either a) external images or b) font-based icons. Either way, you have to put some assets in place to support the rendering of these. Currently, we don't provide that out of the box in the Middleman AsciiDoc integration.

More information about admonition icons can be found here: http://asciidoctor.org/docs/user-manual/#icons

Example updated! Please see https://github.com/opendevise/middleman-asciidoc-example.

Run the site and visit the following page: http://localhost:4567/asciidoctor-sample.html

Perfect! I'm up and running with the FontAwesome icons - thank you for such a thorough response :)