Asciidoctor :: Discussion

JS live rendering?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

5 messages Options

Jasmine

Sep 13, 2017; 8:16am

JS live rendering?

2 posts

Dear all =)

I would like to use AsciiDoc for a small note taking app, but I can't find any JS libraries that can render AsciiDoc.

For editor I am thinking of using CodeMirror, but can it really be true, that there doesn't exist something for rendering AsciiDoc?

Hugs,
Jasmine =)

abelsromero

Sep 13, 2017; 9:44am

Re: JS live rendering?

242 posts

Welcome,

I think the type of solution you want depends on the use. I assume you are looking for a lightweight editor with preview and syntax highlighting. You can have a look at these for ideas: http://asciidoctor.org/docs/editing-asciidoc-with-live-preview/.

Short answer, if you already use some editor/IDE like Atom, Brackets or some JetBrains product, just install the plugins. If you are going to use it only for AsciiDoc, I'd recommend Brackets. It's more user friendly imho.

As for me, I take small notes with notepad++. Things like daily TODO, meeting minutes, etc. are small enough and the AsciiDoc syntax is expressive enough so I can distinguish the sections without need of syntax highlighting.
For real documentation and since I work with Java, I use IntelliJ with the plugin.

BTW, not sure of your level of expertise, but if you are new, check this http://asciidoctor.org/docs/asciidoc-recommended-practices/ and this video https://www.youtube.com/watch?v=Aq2USmIItrs.

cheers,

Jasmine

Sep 13, 2017; 1:28pm

Re: JS live rendering?

2 posts

Thanks =)

I want it to be integrated similar to stackedit.io . of course this editor is very advanced, but something similar for AsciiDoc is what I am looking for =)

Hugs,
Jasmine =)

Ted

Sep 13, 2017; 4:41pm

Re: JS live rendering?

126 posts

Jasmine wrote

I want it to be integrated similar to stackedit.io . of course this editor is very advanced, but something similar for AsciiDoc is what I am looking for =)

Jasmine, it can be accomplished. Start here http://asciidoctor.org/docs/install-and-use-asciidoctorjs/

You'll need the opal.js and asciidoctor.js files and some CSS

<script src="opal.js"></script>
<script src="asciidoctor.js"></script>
<link rel="stylesheet" type="text/css" href="themes/asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />

Then some JavaScript to render the Asciidoctor

var asciidoctorAttributes = Opal.hash2(['attributes'], { 'attributes': ['icons=font@'] });  // by adding the @ symbol, attributes added in line in the asciidoc text takes precedence over this hard-coded attribute

var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAscii").value, asciidoctorAttributes);

document.getElementById('content').innerHTML = html_doc;

(some explanation here: http://discuss.asciidoctor.org/Icons-in-JavaScript-tp1737.html)

- Ted @TedAtCIS

mojavelinux

Sep 14, 2017; 6:45am

Re: JS live rendering?

Administrator

2681 posts

Thanks for your question, Jasmine. And thanks Abel and Ted for the information you provided.

Something like stackedit.io actually requires two libraries, one to support the highlighting in the editor pane and one to render the preview pane.

As Ted mentioned, Asciidoctor.js is the unmatched solution for rendering the preview pane because it uses the code directly from Asciidoctor Ruby (transpiled to JavaScript and adapted for that environment).

The story for the editor pane is not as strong yet. As Abel said, we have a grammar for Atom, which is unique to Atom (see https://github.com/asciidoctor/atom-language-asciidoc). We have one in Brackets and DocGist that will work with CodeMirror (see https://github.com/asciidoctor/codemirror-asciidoc).

But before you start working on something like stackedit.io, I encourage you to look at DocGist. DocGist provides a similar experience with a two-pane editor. It does need some work, but it's already quite good.

http://gist.asciidoctor.org/

HubPress also has a similar editing environment. See https://github.com/HubPress/hubpress.io.

Cheers,

-Dan

On Wed, Sep 13, 2017 at 10:41 AM, Ted [via Asciidoctor :: Discussion] <[hidden email]> wrote:

Jasmine wrote

I want it to be integrated similar to stackedit.io . of course this editor is very advanced, but something similar for AsciiDoc is what I am looking for =)

Jasmine, it can be accomplished. Start here http://asciidoctor.org/docs/install-and-use-asciidoctorjs/

You'll need the opal.js and asciidoctor.js files and some CSS
<script src="opal.js"></script>
<script src="asciidoctor.js"></script>
<link rel="stylesheet" type="text/css" href="themes/asciidoctor.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
Then some JavaScript to render the Asciidoctor
var asciidoctorAttributes = Opal.hash2(['attributes'], { 'attributes': ['icons=font@'] });  // by adding the @ symbol, attributes added in line in the asciidoc text takes precedence over this hard-coded attribute

var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAscii").value, asciidoctorAttributes);

document.getElementById('content').innerHTML = html_doc;
(some explanation here: http://discuss.asciidoctor.org/Icons-in-JavaScript-tp1737.html)

- Ted @TedAtCIS

If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/JS-live-rendering-tp5900p5903.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

... [show rest of quote]

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux