Powered by flexmark-java
- The goal
- Extensions used
- KaTeX support(same syntax of Markdown Preview Enhanced)
- Diagrams
- Presentation
- Install
- Build from source
- License
Visual Studio Code extension Markdown Preview Enhanced
- Basic Syntax
- Extended syntax
- Table
- Emoji & Font-Awesome(Emoji only)
- Superscript(0.1.1)
- Subscript(0.1.1)
- Footnotes
- Abbreviation(0.2.0)
- Mark(0.4.0)
- CriticMarkup(0.7.0)
- Admonition(different grammar. since 0.2.0)
- Math Typesetting(Katex only)
- Diagrams
- Table of Contents
- File Imports
- Code Chunk is not on our roadmap.
- Presentation(It is experimental and has limited functionality.)
- Pandoc
- AbbreviationExtension
- AdmonitionExtension
- AnchorLinkExtension
- EmojiExtension (Under investigation)
- FootnoteExtension
- GfmIssuesExtension
- GitLabExtension
- StrikethroughSubscriptExtension
- SuperscriptExtension
- TablesExtension
- TaskListExtension
- TocExtension
- WikiLinkExtension
Allows to create abbreviations which will be replaced in plain text into tags or optionally into with titles for the abbreviation expansion.
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.to
To create block-styled side content.
!!! qualifier "Optional Title"
block content to
See also Admonition Extension · vsch/flexmark-java Wiki
Automatically adds anchor links to heading, using GitHub id generation algorithm.
:grinning: -> 😀
Creates footnote references in the document.
FootnoteExtension[^1] creates footnote references in the document.
[^1]: https://github.com/vsch/flexmark-java/wiki/Extensions#footnotesFootnoteExtension1 creates footnote references in the document.
Enables issue reference parsing in the form of #123.
Parses and renders GitLab Flavoured Markdown.
```math a^2+b^2=c^2 ```
to
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;to
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
~~Strikethrough~~ -> Strikethrough
H~2~O -> 
x^2^ -> 
See Tables Extension · vsch/flexmark-java Wiki
- [x] Katex support
- [x] mermaid support
- [ ] PlantUML supportto
- Katex support
- mermaid support
- PlantUML support
[TOC] create table of contents.
You click Table of contents to closel table of contents.
Enables wiki links [[page reference]].
syntax: $a^2+b^2=c^2$
to
syntax:
\(a^2+b^2=c^2\)
to
\[a^2+b^2=c^2\]
to
mermaid can be rendered using the flexmark-java GitLab extension. explained above.
exclude follow diagrams.
- Ditaa
- Jcckit
- Sudoku
- ELK
```plantuml @startuml Bob -> Alice : hello @enduml ```
to
```wavedrom
{ signal : [
{ name: "clk", wave: "p......" },
{ name: "bus", wave: "x.34.5x", data: "head body tail" },
{ name: "wire", wave: "0.1..0." },
]}
```
to
```vega
{
"$schema": "https://vega.github.io/schema/vega/v6.json",
"description": "A basic bar chart example, with value labels shown upon pointer hover.",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:pointerover", "update": "datum"},
{"events": "rect:pointerout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
```
to
```vega-lite
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{
"a": "A",
"b": 28
},
{
"a": "B",
"b": 55
},
{
"a": "C",
"b": 43
},
{
"a": "D",
"b": 91
},
{
"a": "E",
"b": 81
},
{
"a": "F",
"b": 53
},
{
"a": "G",
"b": 19
},
{
"a": "H",
"b": 87
},
{
"a": "I",
"b": 52
}
]
},
"mark": "bar",
"encoding": {
"x": {
"field": "a",
"type": "ordinal"
},
"y": {
"field": "b",
"type": "quantitative"
}
}
}
```
to
Kroki support
You can also change your settings to use self-hosted Kroki.
System administration -> Markdown Enhanced -> Change Kroki url -> Apply Changes
```blockdiag {kroki=true}
blockdiag {
Kroki -> generates -> "Block diagrams";
Kroki -> is -> "very easy!";
Kroki [color = "greenyellow"];
"Block diagrams" [color = "pink"];
"very easy!" [color = "orange"];
}
```
to
```javascript {kroki="wavedrom"}
{
signal: [
{ name: "clk", wave: "p.....|..." },
{
name: "Data",
wave: "x.345x|=.x",
data: ["head", "body", "tail", "data"],
},
{ name: "Request", wave: "0.1..0|1.0" },
{},
{ name: "Acknowledge", wave: "1.....|01." },
]
}
```
to
It is experimental and has limited functionality.
This feature is provided by reveal.js.
You can view the presentation by clicking the icon 
in the top right corner of the file viewer.
Slide separators must be clearly indicated with ---.
Currently, the following notations can be converted:
- Inline syntax
- Emoji
- Mark
- Strikethrough
- Subscript
- Superscript (Except when KaTeX notation is present in the same paragraph)
- Math (KaTeX syntax)
- Diagrams
- GraphViz
- PlantUML
- mermaid
- wavedrom
- vega and vega-lite
- Kroki
Let's say the file contents are the following markdown:
### GitBucket Markdown Enhanced Plugin
### Presentation function
---
## mermaid
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
---
## WaveDrom
```wavedrom
{ signal : [
{ name: "clk", wave: "p......" },
{ name: "bus", wave: "x.34.5x", data: "head body tail" },
{ name: "wire", wave: "0.1..0." },
]}
```
---
## code block
```js
function add(x, y) {
return x + y;
}
```
In the above case, the following slide will be displayed:
- download gitbucket-markdown-enhanced-{plugin-version}.jar from Releases
- Place the downloaded file in ~/.gitbucket/plugins.
| Plugin version | GitBucket minimum version |
|---|---|
| - 0.10.1 | 4.36.2 |
| 0.10.2- | 4.40.0 |
sbt assembly
This makes the assembly package target/scala-2.13/gitbucket-markdown-enhanced-{plugin-version}.jar for deployment.
This plugin is licensed under the MIT license.
However, the included libraries are subject to their own licenses.
- flexmark-java - BSD-2-Clause license
- KaTeX - MIT license
- Marked - MIT license
- mermaid - MIT license
- plantuml-mit - MIT License
- reveal.js - MIT License
- vega, vega-lite and vega-embed - BSD-3-Clause license
- wavedrom - MIT license