mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-27 18:12:29 +08:00
68 lines
1.1 KiB
HTML
68 lines
1.1 KiB
HTML
|
<style type="text/css">
|
||
|
|
#editor, .ck-editor {
|
||
|
|
/* Adjust width to the typical width in GH. */
|
||
|
|
width: 820px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre.markdown-output {
|
||
|
|
background: hsl(70, 7%, 16%);
|
||
|
|
color: hsl(0, 0%, 100%);
|
||
|
|
display: block;
|
||
|
|
font-size: 1em;
|
||
|
|
font-family: Monaco, Menlo, Consolas, "Roboto Mono", "Courier New", "Ubuntu Mono", monospace;
|
||
|
|
padding: 1.333em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.editor-container {
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.output-container {
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="editor-container">
|
||
|
|
<textarea id="editor">
|
||
|
|
Mermaid snippet:
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
flowchart TB
|
||
|
|
A --> C
|
||
|
|
A --> D
|
||
|
|
B --> C
|
||
|
|
B --> D
|
||
|
|
```
|
||
|
|
|
||
|
|
More complex case:
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
sequenceDiagram
|
||
|
|
participant Alice
|
||
|
|
participant Bob
|
||
|
|
Alice->>John: Hello John, how are you?
|
||
|
|
loop Healthcheck
|
||
|
|
John->>John: Fight against hypochondria
|
||
|
|
end
|
||
|
|
Note right of John: Rational thoughts <br/>prevail!
|
||
|
|
John-->>Alice: Great!
|
||
|
|
John->>Bob: How about you?
|
||
|
|
Bob-->>John: Jolly good!
|
||
|
|
```
|
||
|
|
|
||
|
|
Javascript snippet:
|
||
|
|
|
||
|
|
```Javascript
|
||
|
|
var foo = 'bar';
|
||
|
|
|
||
|
|
alert( foo );
|
||
|
|
```
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<div class="output-container">
|
||
|
|
<p>Output:</p>
|
||
|
|
|
||
|
|
<pre class="markdown-output"><code id="markdown-output"></code></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|