Comments (7)
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.
@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.
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.
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.
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 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.
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)
- Failing to login: 422 Unprocessable Entity HOT 2
- error code '418 Invalid TiddlyWiki' for my TiddlyWiki 5.3.0 HOT 2
- RawMarkup tag in a tiddler, ends in palette errors when use external core TiddlyWiki HOT 5
- Locking Wikis HOT 3
- Error using docker-compose-prod.yml HOT 5
- add filter to the hub for type of wiki HOT 3
- Intrawiki Searching HOT 2
- Provide a "download" option as well as "clone" when showing templates in the explore tab
- tiddlywikicore-5.3.2.js contains wrong tiddlers HOT 17
- Make a "download all sites" button HOT 1
- How to check if the TW is read-only on frontend? HOT 2
- Lost tiddly site HOT 4
- [IDEA] Allow users to uglify their wiki
- TiddlyWiki Lost Data Help HOT 2
- confetti! v5.3.4 HOT 6
- Request to takedown note-wiki.tiddlyhost.com due to Defamatory Contents HOT 66
- RFC: Request for adding "Other Edit" options HOT 1
- Please update to latest version :-) HOT 2
- Request to takedown 22c-bad.tiddlyhost.com HOT 17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tiddlyhost.