Git Product home page Git Product logo

Comments (7)

saqimtiaz avatar saqimtiaz commented on August 10, 2024 1

Create a tiddler with the tag $:/tags/RawMarkupWikified/TopHead

Try this:

`<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});
</script>`

Note the backticks that should prevent the script tag from getting wikified.

from tiddlyhost.

saqimtiaz avatar saqimtiaz commented on August 10, 2024 1

@DesignThinkerer there is an existing mermaid plugin that you might be able to make use of: https://talk.tiddlywiki.org/t/another-mermaid-widget-mermaid-widget/8998

from tiddlyhost.

simonbaird avatar simonbaird commented on August 10, 2024

With the $:/tags/RawMarkupWikified/TopHead the content is wikified before being injected, so you end up with this in the TW file:

...
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--~~ Raw markup for the top of the head section ~~-->

    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="application-name" content="TiddlyWiki" />
...

If you use the $:/tags/RawMarkup then it works more like you want it to, but it will be inserted at the bottom of the <head> element not the top.

...
<!--~~ Raw markup ~~-->

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});
</script>

</head>
...

So I suggest you use $:/tags/RawMarkup. I'm not sure how to insert unwikified content at the top of the <head> element, but perhaps there is a way.

There might also be a way to have the wikified content have the required <script> tags. Let me experiment with that.

from tiddlyhost.

simonbaird avatar simonbaird commented on August 10, 2024

I thought maybe using {{{ and }}} around the tiddler content would help, since the wikified output would be the raw text, but for some reason it produces this:

...
<head>
<scripttype>importmermaidfromhttps://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs;mermaid.initialize({startOnLoad:true});
...

Maybe a TiddlyWiki expert could help explain why it's doing that.

Anyway, my suggestion is to use the $:/tags/RawMarkup tag, not $:/tags/RawMarkupWikified/TopHead.

from tiddlyhost.

DesignThinkerer avatar DesignThinkerer commented on August 10, 2024

Create a tiddler with the tag $:/tags/RawMarkupWikified/TopHead

Try this:

`<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true});
</script>`

Note the backticks that should prevent the script tag from getting wikified.

This seem to work !

https://louder-haulage-15.tiddlyhost.com/#Demo:Demo%20%5B%5BNew%20Tiddler%5D%5D%20GettingStarted

There is another issue : it will only render mermaid js graph for tiddlers that are in the story at startup, but I'm guessing that this is due to the rendering engine of tiddlywiki and not a bug. I should be able to solve this bu creating a custom widget, probably.

Thanks @simonbaird and @saqimtiaz !

from tiddlyhost.

DesignThinkerer avatar DesignThinkerer commented on August 10, 2024

@DesignThinkerer there is an existing mermaid plugin that you might be able to make use of: https://talk.tiddlywiki.org/t/another-mermaid-widget-mermaid-widget/8998

this is perfect. Thanks again !

from tiddlyhost.

simonbaird avatar simonbaird commented on August 10, 2024

Note the backticks that should prevent the script tag from getting wikified.

Ah, thanks @saqimtiaz, that's what I was looking for.

from tiddlyhost.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.