JavaScript and External libraries

Writing JavaScript

You can add some JavaScript to your templates and it will be interpreted when generating a document.

<script type="text/javascript">
  document.write('Hello World!');
</script>

External libraries

If you need to use a library that transforms your text, applies filters to images or say… inserts charts in your document, you can import them like you would do in a normal HTML page.

Imagine you’re writing a technical documentation and you want to automatically add syntax highlighting. You could import the Prism CSS in the CSS tab:

@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css');

Then import the JS library in the HTML tab:

<pre><code class="language-css">.myComponent {
  display: flex;
  justify-content: space-between;
}</code></pre>

<pre><code class="language-ruby">class Greeter
  def say_hello(name: "Jane")
    puts "Hello #{name}!"
  end
end</code></pre>

{% assign cdnBase = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1" %}
<script src="{{cdnBase}}/prism.min.js"></script>
<script src="{{cdnBase}}/components/prism-css.js"></script>
<script src="{{cdnBase}}/components/prism-ruby.js"></script>

You can now get the code with pretty colors in your document!

Dynamic data

You can access the dynamic data of your document using the $docPayload variable.

<script type="text/javascript">
  let userName = $docPayload.user.name;
</script>

This can be very useful when building charts for instance.