There, you can enter a series of space-separated, key/value attribute pairs. There, in the Asciidoctor options section, you’ll see that the first field is named “ Custom attributes”. This takes you to the extension’s configuration settings, putting you on the Details tab by default.Ĭlick the Preferences tab, between Details and Permissions, to change to the Preferences tab. To set the custom attribute, right-click on Asciidoctor.js Live Preview’s icon in the Firefox toolbar and click “ Manage Extension” in the menu that appears. To do that, you set the imagesdir attribute, so that the plugin knows the image base path.įor example, in the image below, you can see that the image is missing, based on the following line AsciiDoc source file: image::core-component-pimple.pngīecause the imagesdir attribute isn’t set by default, the plugin does not know where to find the image. Let’s assume that you want to view images in your content. Long story short, I did what I should have done originally, check the extension’s configuration options to see if it supports setting custom attributes.Īs you would likely expect, you can set custom attributes in the plugin.įor the remainder of the post, I’m going to step through how to do so. To make matters worse, I intermittently committed those attributes to source control. Yes, I’m somewhat embarrassed at my laziness. Right from the start, this felt like a hack. To “ fix” these “ issues”, I started adding custom attributes in the AsciiDoc source files, such as imagesdir, to set the path to the images for that file, and experimental to enable AsciiDoc’s experimental features. Given that, I’ve come to rely on the Live Preview extension ever more, to the point that I use it, almost, daily.įor example, I write or update some content in VIM and then switch to the tab in Firefox, which previews the content, to see how the document renders.īecause of the increased reliance, I’m now reviewing all content, not just text.Īs a result, I found that there were little things which, by default, the extension wouldn’t render correctly, such as images and include examples. However, I don’t always write content which is part of an Antora project, so I needed a preview tool to review the content before it was committed to version control. However, as some documentation projects I’ve been working on have grown ever larger, generating a full set of documentation to view a small change became quite impractical. Given that, when I was happy enough with the content, I’d typically use yarn antora to generate an up to date version of the documentation and then view the generated documentation. This was mainly because the AsciiDoc content that I wrote was part of an Antora project. Up until recently, I only used it to review text and didn’t worry about other facets, such as included images and example files. It’s a speedy way of knowing how your content will, approximately, look later, when generated. If this is your first time hearing about the extension, after installing and enabling it, all you need to do is open an AsciiDoc file, and it renders as HTML, using one of several custom themes. ![]() I added the extension to my workflow some months ago, as my editor of choice, VIM (MacVIM on macOS and plain VIM on Linux), unlike other editors such as SublimeText and Atom, can’t integrate preview support natively. So, to preview AsciiDoc content, I use the Asciidoctor.js Live Preview extension (in both Firefox and Chrome/Chromium). Whether I’ve been updating my Zend Expressive (now Mezzio) book or doing technical writing client work, I write and edit a lot of AsciiDoc content.Īnd while I can generally know if I’ve made a mistake in the content that I’ve written, just by reading it, I won’t always know if it renders correctly, or quite as I’d like.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |