mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-20 02:05:21 -04:00
553cd3577d
added vega-lite diagrams Update CHANGELOG.md Co-authored-by: mrdrogdrog <mr.drogdrog@gmail.com>
274 lines
6.3 KiB
TypeScript
274 lines
6.3 KiB
TypeScript
export const editorTestContent = `---
|
|
title: Features
|
|
description: Many features, such wow!
|
|
robots: noindex
|
|
tags: hedgedoc, demo, react
|
|
opengraph:
|
|
title: Features
|
|
---
|
|
# Embedding demo
|
|
[TOC]
|
|
|
|
## Vega-Lite
|
|
|
|
\`\`\`vega-lite
|
|
|
|
|
|
{
|
|
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
|
|
"description": "Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm",
|
|
"data": {
|
|
"values": [
|
|
{"category": "Sky", "value": 75, "order": 3},
|
|
{"category": "Shady side of a pyramid", "value": 10, "order": 1},
|
|
{"category": "Sunny side of a pyramid", "value": 15, "order": 2}
|
|
]
|
|
},
|
|
"mark": {"type": "arc", "outerRadius": 80},
|
|
"encoding": {
|
|
"theta": {
|
|
"field": "value", "type": "quantitative",
|
|
"scale": {"range": [2.35619449, 8.639379797]},
|
|
"stack": true
|
|
},
|
|
"color": {
|
|
"field": "category", "type": "nominal",
|
|
"scale": {
|
|
"domain": ["Sky", "Shady side of a pyramid", "Sunny side of a pyramid"],
|
|
"range": ["#416D9D", "#674028", "#DEAC58"]
|
|
},
|
|
"legend": {
|
|
"orient": "none",
|
|
"title": null,
|
|
"columns": 1,
|
|
"legendX": 200,
|
|
"legendY": 80
|
|
}
|
|
},
|
|
"order": {
|
|
"field": "order"
|
|
}
|
|
},
|
|
"view": {"stroke": null}
|
|
}
|
|
|
|
|
|
\`\`\`
|
|
|
|
## GraphViz
|
|
|
|
\`\`\`graphviz
|
|
graph {
|
|
a -- b
|
|
a -- b
|
|
b -- a [color=blue]
|
|
}
|
|
\`\`\`
|
|
|
|
\`\`\`graphviz
|
|
digraph structs {
|
|
node [shape=record];
|
|
struct1 [label="<f0> left|<f1> mid\ dle|<f2> right"];
|
|
struct2 [label="<f0> one|<f1> two"];
|
|
struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"];
|
|
struct1:f1 -> struct2:f0;
|
|
struct1:f2 -> struct3:here;
|
|
}
|
|
\`\`\`
|
|
|
|
\`\`\`graphviz
|
|
digraph G {
|
|
main -> parse -> execute;
|
|
main -> init;
|
|
main -> cleanup;
|
|
execute -> make_string;
|
|
execute -> printf
|
|
init -> make_string;
|
|
main -> printf;
|
|
execute -> compare;
|
|
}
|
|
\`\`\`
|
|
|
|
\`\`\`graphviz
|
|
digraph D {
|
|
node [fontname="Arial"];
|
|
node_A [shape=record label="shape=record|{above|middle|below}|right"];
|
|
node_B [shape=plaintext label="shape=plaintext|{curly|braces and|bars without}|effect"];
|
|
}
|
|
\`\`\`
|
|
|
|
\`\`\`graphviz
|
|
digraph D {
|
|
A -> {B, C, D} -> {F}
|
|
}
|
|
\`\`\`
|
|
|
|
## Sequence Diagram (deprecated)
|
|
|
|
\`\`\`sequence
|
|
Title: Here is a title
|
|
note over A: asdd
|
|
A->B: Normal line
|
|
B-->C: Dashed line
|
|
C->>D: Open arrow
|
|
D-->>A: Dashed open arrow
|
|
participant IOOO
|
|
\`\`\`
|
|
|
|
## Mermaid
|
|
|
|
\`\`\`mermaid
|
|
gantt
|
|
title A Gantt Diagram
|
|
|
|
section Section
|
|
A task: a1, 2014-01-01, 30d
|
|
Another task: after a1, 20d
|
|
|
|
section Another
|
|
Task in sec: 2014-01-12, 12d
|
|
Another task: 24d
|
|
\`\`\`
|
|
|
|
## Flowchart
|
|
|
|
\`\`\`flow
|
|
st=>start: Start
|
|
e=>end: End
|
|
op=>operation: My Operation
|
|
op2=>operation: lalala
|
|
cond=>condition: Yes or No?
|
|
|
|
st->op->op2->cond
|
|
cond(yes)->e
|
|
cond(no)->op2
|
|
\`\`\`
|
|
|
|
## ABC
|
|
|
|
\`\`\`abc
|
|
X:1
|
|
T:Speed the Plough
|
|
M:4/4
|
|
C:Trad.
|
|
K:G
|
|
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
|
|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|
|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
|
|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
|
|
\`\`\`
|
|
|
|
## CSV
|
|
|
|
\`\`\`csv delimiter=; header
|
|
Username; Identifier;First name;Last name
|
|
"booker12; rbooker";9012;Rachel;Booker
|
|
grey07;2070;Laura;Grey
|
|
johnson81;4081;Craig;Johnson
|
|
jenkins46;9346;Mary;Jenkins
|
|
smith79;5079;Jamie;Smith
|
|
\`\`\`
|
|
|
|
## some plain text
|
|
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
|
|
## KaTeX
|
|
You can render *LaTeX* mathematical expressions using **KaTeX**, as on [math.stackexchange.com](https://math.stackexchange.com/):
|
|
|
|
The *Gamma function* satisfying $\\Gamma(n) = (n-1)!\\quad\\forall n\\in\\mathbb N$ is via the Euler integral
|
|
|
|
$$
|
|
x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.
|
|
$$
|
|
|
|
$$
|
|
\\Gamma(z) = \\int_0^\\infty t^{z-1}e^{-t}dt\\,.
|
|
$$
|
|
|
|
> More information about **LaTeX** mathematical expressions [here](https://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference).
|
|
|
|
## Blockquote
|
|
> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
> [color=red] [name=John Doe] [time=2020-06-21 22:50]
|
|
|
|
## Slideshare
|
|
{%slideshare mazlan1/internet-of-things-the-tip-of-an-iceberg %}
|
|
|
|
## Gist
|
|
https://gist.github.com/schacon/1
|
|
|
|
## YouTube
|
|
https://www.youtube.com/watch?v=KgMpKsp23yY
|
|
|
|
## Vimeo
|
|
https://vimeo.com/23237102
|
|
|
|
## Asciinema
|
|
https://asciinema.org/a/117928
|
|
|
|
## PDF
|
|
{%pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf %}
|
|
|
|
## Code highlighting
|
|
\`\`\`javascript=
|
|
var s = "JavaScript syntax highlighting";
|
|
alert(s);
|
|
function $initHighlight(block, cls) {
|
|
try {
|
|
if (cls.search(/\\bno\\-highlight\\b/) != -1)
|
|
return process(block, true, 0x0F) +
|
|
' class=""';
|
|
} catch (e) {
|
|
/* handle exception */
|
|
}
|
|
for (var i = 0 / 2; i < classes.length; i++) {
|
|
if (checkCondition(classes[i]) === undefined)
|
|
return /\\d+[\\s/]/g;
|
|
}
|
|
}
|
|
\`\`\`
|
|
|
|
## PlantUML
|
|
\`\`\`plantuml
|
|
@startuml
|
|
participant Alice
|
|
participant "The **Famous** Bob" as Bob
|
|
|
|
Alice -> Bob : hello --there--
|
|
... Some ~~long delay~~ ...
|
|
Bob -> Alice : ok
|
|
note left
|
|
This is **bold**
|
|
This is //italics//
|
|
This is ""monospaced""
|
|
This is --stroked--
|
|
This is __underlined__
|
|
This is ~~waved~~
|
|
end note
|
|
|
|
Alice -> Bob : A //well formatted// message
|
|
note right of Alice
|
|
This is <back:cadetblue><size:18>displayed</size></back>
|
|
__left of__ Alice.
|
|
end note
|
|
note left of Bob
|
|
<u:red>This</u> is <color #118888>displayed</color>
|
|
**<color purple>left of</color> <s:red>Alice</strike> Bob**.
|
|
end note
|
|
note over Alice, Bob
|
|
<w:#FF33FF>This is hosted</w> by <img sourceforge.jpg>
|
|
end note
|
|
@enduml
|
|
\`\`\`
|
|
|
|
## ToDo List
|
|
|
|
- [ ] ToDos
|
|
- [X] Buy some salad
|
|
- [ ] Brush teeth
|
|
- [x] Drink some water
|
|
- [ ] **Click my box** and see the source code, if you're allowed to edit!
|
|
|
|
`
|