Use Google Typograms

[RduMarais]

Hello,

Thanks for all the work put in marp !
Google Typograms is a lib to render diagrams in the browser.
It is very complete, powerful, and basically only needs 2 lines of code :

<script src="https://google.github.io/typograms/typograms.js"></script>
The diagram : 
<script type="text/typogram">
+----+
|    |---> My first diagram!
+----+
</script>

As of today, it works very well per se as HTML tags (with --html) in a mardown page rendered.
If other marp cli users would be interested, is it possible to include typogram as a language tag in marp ? such as

```typogram
+----+
|    |---> My first diagram!
+----+
```

As far as i understand, it requires to build a dedicated engine as it is the case in this issue, but this needs install via npm wich is impossible for me + i think the strength of marp is its lightweight core.
I would be happy to contribute, but as of today i did not find any simple way to tweak this.
Would you have any pointers in that direction ?

[yhatt]

You can write a small Marp plugin like this.

// typograms-plugin.mjs
export const typogramsPlugin = (md) => {
  const { fence } = md.renderer.rules

  md.renderer.rules.fence = (tokens, i, options, env, self) => {
    const info = md.utils.unescapeAll(tokens[i].info).trim()

    if (info === 'typograms') {
      let output = `<script type="text/typogram">\n${tokens[i].content}</script>`

      if (!env.typogramsScriptLoaded) {
        output = `<script src="https://google.github.io/typograms/typograms.js"></script>${output}`
      }

      env.typogramsScriptLoaded = true

      return output
    }

    return fence.call(self, tokens, i, options, env, self)
  }
}

And you can use this plugin through Marp CLI:

// marp.config.mjs
import { typogramsPlugin } from './typograms-plugin.mjs'

export default {
  engine: ({ marp }) => marp.use(typogramsPlugin),
}

marp --config ./marp.config.mjs typograms.md

Warning

In Marp's HTML export, typograms.js seems not to be able to recognize invisible diagrams that were put on initially inactive slide pages, because typograms.js is using Element.innerText. (https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innertext) If you concerned, recommend to send a feedback to typograms issue tracker.

[soaple]

Hi, I created markdown-it plugin for Google Typograms.
https://github.com/markslides/markdown-it-typograms

Also, you can Edit/Preview/Show your slide on MarkSlide, which is standalone PWA based on Marp.
https://www.markslides.ai/