blob: 06bb588525cafd9896685a91764d6e8aca0217d2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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.
|
