Using a Simple JavaScript External Library

May 4, 2024

It’s often handy to make use of other people’s well written JavaScript libraries.

I was recently in a situtaion where I needed to produce really nice HTML and PDF outputs on the server end. The solution I chose was ASCIIDOC / ASCIIDoctor which is available for WIndows, Mac and Unix..

I planned to save user input to a Web service, and there run ASCIIdoctor to create the PDF to Email to a user.

In fact, I use ASCIIDOCTOR to make this blog, it’s very nice - sort of a big brother to the better known MarkDown langauge.

But I also wanted to give a live preview in my EWB based program, so as someone types, it would render close to a final version of the prepared documentation.

Would I have to write my own implementation of ASCIIDOC… it’s pretty powerful, so there would be lot of code to write and perfect. The thought was daunting.

It turns out, ASCIIDOCTOR was written in the Ruby language, but there is a Ruby to JavaScript transpiler (just as EWB is an Object Pascal to JavaScript transpiler), giving us a quick JavaScript function you can call.

To use it, you just need a TScript to load the asciidoctor.js file (you can find it on the Internet), and a bit of EWB wrapper to convert the marked up text to HTML:

type
  external TAsciiDoctor = class ( TExternalObject )
  public
     function convert( s : string ):string;
  end;

var
  external function Asciidoctor : TAsciiDoctor;

Note	capitalization is important in JavaScript definitions. This one uses a capital A.

Now to write a test program. I use a THTMLLabel to hold the resulting HTML. You may want to put it inside a TScrollPanel so that you can scroll it:

procedure TForm1.Button1Click(Sender: TObject);
var
   asciidoc : TAsciiDoctor;
begin
   asciidoc := AsciiDoctor;
   htmllabel1.Content := asciidoc.convert( 'hi *there* _you_ ');

This generates:

hi there you.

You can include resized images, hyperlinks, tables, and all sorts of things.

Next, I created TMultiLineEdit and set the OnChanged event handler to do something similar:

var
   asciidoc : TAsciiDoctor;
begin
   asciidoc := AsciiDoctor;
   htmllabel1.Content := asciidoc.convert( MultiLineEdit1.Lines.Text );
end;

While the above code is pretty good HTML, it can be improved. For example, the table does not have border lines.

ASCIIdoctor wants to use CSS (as does all HTML) to enhance the look of the HTML. One can use the default CSS file, or create your own enhancements to further adjust things.

Those who have license for my Nice library can easily add such CSS with the simple line:

  addlocalCSS( form1, 'asciidoctor.css',Nil,Nil);

A sample of the free Code can be found at: my web site with the HTML5/JavaScript output at http://erickengelke.com/asciidoc/asciidoctest.html.

If you don’t have the Nice librray, the addloclaCSS() line needs to be removed.

Excellent, an ASCIIDoc formatter in just a handful of lines of code. So I look like hero to my clients, and just a few minutes of research needed to do so.