# Markdown-it renderer - execute js code upon loading

**URL:** https://discourse.joplinapp.org/t/markdown-it-renderer-execute-js-code-upon-loading/19588
**Category:** Plugins
**Created:** [18 August 2021 12:33 UTC](https://discourse.joplinapp.org/t/markdown-it-renderer-execute-js-code-upon-loading/19588 "2021-08-18T12:33:00Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![xUser5000](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/xuser5000/32/7984_2.png) [@xUser5000](https://discourse.joplinapp.org/u/xUser5000)
#### Post date: [18 August 2021 12:33 UTC](https://discourse.joplinapp.org/t/markdown-it-renderer-execute-js-code-upon-loading/19588/1 "2021-08-18T12:33:00Z")

</div>

I have a markdown-it content script that contains a rule like this:

```auto
markdownIt.renderer.rules["some_token_name"] = function (
    tokens,
    idx,
    options
) {
   return "<tag>some custom content</tag>";
};

```

I want to execute some js code when the above tag gets rendered by the note viewer. I tried including a `<script>` tag but it does not work (it does not throw errors but the code is not executed).

The only workaround I found ([here](https://github.com/ambrt/joplin-plugin-referencing-notes/blob/master/src/notesReferences.js)) that was working correctly was to include the js code like this:  
`<style onload="some js code" />`  
This executes the JS code but, for some reason, the note viewer does not render anything after the first token that contains the `<style>` tag.

Does anybody know a trick to solve this issue?  
Thanks in advance.

---

<div class="post-metadata">

### Author: ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)
#### Post date: [18 August 2021 12:52 UTC](https://discourse.joplinapp.org/t/markdown-it-renderer-execute-js-code-upon-loading/19588/2 "2021-08-18T12:52:15Z")

</div>

Couldn't you get this working by adding the JS file as a plugin asset? For example like it's done in the Mermaid plugin: [joplin/mermaid.ts at dev · laurent22/joplin · GitHub](https://github.com/laurent22/joplin/blob/dev/packages/renderer/MdToHtml/rules/mermaid.ts)

---

<div class="post-metadata">

### Author: ![xUser5000](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/xuser5000/32/7984_2.png) [@xUser5000](https://discourse.joplinapp.org/u/xUser5000)
#### Post date: [18 August 2021 13:10 UTC](https://discourse.joplinapp.org/t/markdown-it-renderer-execute-js-code-upon-loading/19588/3 "2021-08-18T13:10:20Z")

</div>

It looks good overall, I'll see what I can do.

```auto
document.addEventListener('joplin-noteDidUpdate', () => {
	mermaidInit();
});

```

Is this a standard event added by Joplin? If this is the case, should it be added to the documentation?

---

<div class="post-metadata">

### Author: ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)
#### Post date: [18 August 2021 13:20 UTC](https://discourse.joplinapp.org/t/markdown-it-renderer-execute-js-code-upon-loading/19588/4 "2021-08-18T13:20:57Z")

</div>

Yes that's a Joplin event and yes if you'd like feel free to create a PR to add the documentation for it. I guess it could go somewhere in the content script doc.