diff options
Diffstat (limited to 'samples/asciidoctor-js-browser-extension.adoc')
| -rw-r--r-- | samples/asciidoctor-js-browser-extension.adoc | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/samples/asciidoctor-js-browser-extension.adoc b/samples/asciidoctor-js-browser-extension.adoc new file mode 100644 index 0000000..06bb588 --- /dev/null +++ b/samples/asciidoctor-js-browser-extension.adoc @@ -0,0 +1,47 @@ +[#asciidoctor-js-browser-extension] += Asciidoctor.js browser extension: _Preview_ AsciiDoc in your browser +Guillaume Grossetie <https://github.com/mogztter> +2013-09-18 +:imagesdir: images +:username: mogztter +:gh-chrome-repo: https://github.com/asciidoctor/asciidoctor-chrome-extension +:gh-ff-repo: https://github.com/asciidoctor/asciidoctor-firefox-addon +:gh-adjs-repo: https://github.com/asciidoctor/asciidoctor.js +:gh-ad-repo: https://github.com/asciidoctor/asciidoctor +:download-chrome-extension: https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia +:download-ff-addon: https://addons.mozilla.org/fr/firefox/addon/asciidoctorjs-live-preview/ +:markitup-site: http://markitup.jaysalvat.com/ +:experimental: + +I'd like to introduce you to the easiest way to render any AsciiDoc file, local or remote, as HTML directly in your browser! +All you need to do is install the {download-chrome-extension}[Chrome extension] or the {download-ff-addon}[Firefox add-on]. +Then you can preview any AsciiDoc file as HTML just by visiting it! + +== How it works + +The Chrome extension and the Firefox add-on use {gh-adjs-repo}[Asciidoctor.js] to render AsciiDoc as HTML inside your browser. +Both provide a toggle button to switch between HTML output and AsciiDoc source. + +Here you can see a local AsciiDoc file rendered inside of Chrome. + +.Asciidoctor.js Chrome extension in action +image::asciidoctor-js-chrome-extension.png[] + +TIP: You can view any AsciiDoc file on GitHub through the lens of Asciidoctor.js with this extension! +Simply navigate to the file in the GitHub web interface (try https://github.com/asciidoctor/asciidoctor.org/blob/master/news/introducing-asciidoctor-js-live-preview.adoc[this blog post]) and click the btn:[Raw] button that appears above the file preview. +Looks much better, doesn't it? + +== Future + +Currently, we are using {gh-adjs-repo}[Asciidoctor.js] based on {gh-ad-repo}[Asciidoctor] 0.1.2. +We planned to cross-compile the newly-released {gh-ad-repo}[Asciidoctor] 0.1.4 to Javascript, to support the latest and greatest features! + +We are also working on adding some cool new features : + + * browser-based editor using {markitup-site}[MarkItUp!] + * live reload to automatically refresh on local file changes + * and many more... + +== Contributing + +We're always open for patches, better documentation, feature requests, evangelizing or any help you're able to provide. |