isabella232 / highlightjs-mde-languages

MDE language grammars for Highlight.js

Highlight.js Grammars for MDE languages

Provided grammars

• ATL - Atlanmod Transformation Language

• OCL - Object Constraint Language

• Xcore - Extended concrete syntax for Ecore

Download

The minified and browserified pakage is available here.

Usage

Web page or Node.js

Include the Highlight.js library in your webpage or Node app, then load this module.

<script type="text/javascript" src="/path/to/highlight.min.js"></script>
<script type="text/javascript" charset="UTF-8"
  src="/path/to/highlightjs-mde-languages/dist/mde-languages.min.js"></script>
<script type="text/javascript">
  hljs.highlightAll();
</script>

Reveal.js

Using Asciidoctor Reveal.js

First, set the revealjs_plugins attribute in the beginning of your Asciidoc document:

:revealjs_plugins: revealjs-plugins.js

Second, create the revealjs-plugins.js file, next to your Asciidoc document (you can specify a different path, of you want):

{src: 'mde-languages.min.js', async:true, callback: function() { hljs.initHighlightingOnLoad(); }}

Asciidoctor Reveal.js will add this line to the generated Reveal.js configuration, allowing it to load the highlighjs-mde grammars.

Finally, compile your code and take a look at the generated html file. In the bottom, you should find the following lines:

  // Optional libraries used to extend on reveal.js
  dependencies: [
      { src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
      { src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
      { src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
      { src: 'reveal.js/plugin/notes/notes.js', async: true },
      {src: 'mde-languages.min.js', async:true, callback: function() { hljs.initHighlightingOnLoad(); }}
  ],

As you see, Asciidoctor Reveal.js just adds the contents of the revealjs-plugins.js to Reveal.js list of dependencies.

Examples

I use these grammars in the slides of my Model-driven Engineering course:

• MDE slides (sources).

• OCL slides (sources).

Local build

1. Use npm to install dependencies: npm install

2. Run the build script: npm run build

3. The packaged file (mde-languages.min.js) is placed in the build folder.