This script will render a Markdown file to HTML, injecting special HTML attributes for the Englighter WordPress code plugin.

You'll need the Node.js runtime installed on your machine. With Node in place, just run the following from the command line, in the project root directory.

npm install

1. Add a Markdown file exported from Ulysses to the {project_root}/docs directory. Make sure to name the file in.md.
2. Run npm start

This should generate a file called {project_root}/docs/out.html, the contents of which you can copy and paste into a WordPress post.

This script will not work with indented code blocks. Please mark code blocks with ``` instead.

    This will not
    work.

```
This will work
fine
```

This script assumes that you're using the Enlighter WordPress plugin for code highlighting.

You can add the following sugar to your Markdown for automatic conversion to Enlighter data attributes in the generated HTML.

@file:src/foo/bar.js
const thing = require("foobar");

// ...

The @file:your_file_name will get converted to a data-enlighter-title attribute so that the file path will show as the title of the code block. So the above will be rendered as follows.

<pre
  class="EnlighterJSRAW"
  data-enlighter-language="generic"
  data-enlighter-linenumbers="false"
  data-enlighter-group="a4396d38-4fe5-4b14-9d35-f0a2a57a7be0"
  <!--
  GUID
  --
>
  data-enlighter-title="src/foo/bar.js"
>
const thing = require("foobar");

// ...
</pre>

In a code block, each line marked with ** will be added to the data-enlighter-highlight list attribute so that the line will be higlighted when rendered.

let oldCode = lookNormal();

**let newCode = beHighlighted();
**newCode.forEach(line => {
**  line.standOut();
**});

The above code will render to the following.

<pre class="EnlighterJSRAW"
  data-enlighter-language="generic"
  data-enlighter-linenumbers="false"
   data-enlighter-highlight="3,4,5,6"
>
let oldCode = lookNormal();

let newCode = beHighlighted();
newCode.forEach(line => {
  line.standOut();
});
</pre>

✋🏽 Heads up Each ** will be replaced with an empty string, so make sure that your code indentation acts as if the **s don't exist at all.

<img> tags will be replaced with a highlight placeholder to make adding images in your final WordPress post easier.

<img src="foo.png" alt="Picture of a foo">

...will render to...

<div><strong style="color: #ff6600;">📸 foo.png (Picture of a foo)</strong></div>

✋🏽 Heads up An alt tag will not be rendered in the placeholder if its value is exactly the same as the src e.g. <img src="bar.png" alt="bar.png"> will render to <div><strong style="color: #ff6600;">📸 bar.png</strong></div>.

This script is unit-tested with Jest. To run all tests:

npm run test

To run Jest in watch mode:

npm run dev

-- Happy coding 🥸🤓