Add mermaid JS renderer (#12334)
* Add mermaid JS renderer For feature parity with GitLab. Tested in files, issues, wiki, editor. arc-green only does an inversion because the renderer seems to like to render white backgrounds on boxes. Ref: https://github.com/go-gitea/gitea/issues/3340 Fixes: https://github.com/go-gitea/gitea/issues/12307 * add feature entry, switch to neutral theme, remove border * add bindFunctions support * remove unnecessary border-radius Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
GitHub
parent
46ef562a16
commit
4315e313d1
@ -108,45 +108,6 @@ Apart from `extra_links.tmpl` and `extra_tabs.tmpl`, there are other useful temp
|
||||
- `body_outer_post.tmpl`, before the bottom `<footer>` element.
|
||||
- `footer.tmpl`, right before the end of the `<body>` tag, a good place for additional Javascript.
|
||||
|
||||
#### Example: Mermaid.js
|
||||
|
||||
If you would like to add [mermaid.js](https://mermaid-js.github.io/mermaid) support to Gitea's markdown you simply add:
|
||||
|
||||
```html
|
||||
{{if .RequireHighlightJS}}
|
||||
<script src="https://unpkg.com/mermaid@8.4.5/dist/mermaid.min.js"></script>
|
||||
<!-- or wherever you have placed it -->
|
||||
<script>mermaid.init(".language-mermaid")</script>
|
||||
{{end}}
|
||||
```
|
||||
|
||||
to `custom/footer.tmpl`. You then can add blocks
|
||||
like below to your markdown:
|
||||
|
||||
```mermaid
|
||||
stateDiagram
|
||||
[*] --> Active
|
||||
|
||||
state Active {
|
||||
[*] --> NumLockOff
|
||||
NumLockOff --> NumLockOn : EvNumLockPressed
|
||||
NumLockOn --> NumLockOff : EvNumLockPressed
|
||||
--
|
||||
[*] --> CapsLockOff
|
||||
CapsLockOff --> CapsLockOn : EvCapsLockPressed
|
||||
CapsLockOn --> CapsLockOff : EvCapsLockPressed
|
||||
--
|
||||
[*] --> ScrollLockOff
|
||||
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
|
||||
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
|
||||
}
|
||||
```
|
||||
|
||||
If you want to use Mermaid.js outside of markdown, e.g. in other templates or HTML files,
|
||||
you would need to remove `{{if .RequireHighlightJS}}` and `{{end}}`.
|
||||
|
||||
Mermaid will detect and use tags with `class="language-mermaid"`.
|
||||
|
||||
#### Example: PlantUML
|
||||
|
||||
You can add [PlantUML](https://plantuml.com/) support to Gitea's markdown by using a PlantUML server.
|
||||
|
||||
@ -128,6 +128,7 @@ Windows, on architectures like amd64, i386, ARM, PowerPC, and others.
|
||||
- Environment variables
|
||||
- Command line options
|
||||
- Multi-language support ([21 languages](https://github.com/go-gitea/gitea/tree/master/options/locale))
|
||||
- [Mermaid](https://mermaidjs.github.io/) Diagram support
|
||||
- Mail service
|
||||
- Notifications
|
||||
- Registration confirmation
|
||||
|
||||
464
package-lock.json
generated
464
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -25,6 +25,7 @@
|
||||
"jquery.are-you-sure": "1.9.0",
|
||||
"less-loader": "6.2.0",
|
||||
"license-webpack-plugin": "2.2.0",
|
||||
"mermaid": "8.6.3",
|
||||
"mini-css-extract-plugin": "0.9.0",
|
||||
"monaco-editor": "0.20.0",
|
||||
"monaco-editor-webpack-plugin": "1.9.0",
|
||||
|
||||
@ -13,6 +13,7 @@ import initClipboard from './features/clipboard.js';
|
||||
import initUserHeatmap from './features/userheatmap.js';
|
||||
import initServiceWorker from './features/serviceworker.js';
|
||||
import initMarkdownAnchors from './markdown/anchors.js';
|
||||
import renderMarkdownContent from './markdown/content.js';
|
||||
import attachTribute from './features/tribute.js';
|
||||
import createDropzone from './features/dropzone.js';
|
||||
import initTableSort from './features/tablesort.js';
|
||||
@ -46,6 +47,7 @@ function initCommentPreviewTab($form) {
|
||||
}, (data) => {
|
||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
$previewPanel.html(data);
|
||||
renderMarkdownContent();
|
||||
});
|
||||
});
|
||||
|
||||
@ -75,6 +77,7 @@ function initEditPreviewTab($form) {
|
||||
}, (data) => {
|
||||
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
|
||||
$previewPanel.html(data);
|
||||
renderMarkdownContent();
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -1007,6 +1010,7 @@ async function initRepository() {
|
||||
}
|
||||
dz.emit('submit');
|
||||
dz.emit('reload');
|
||||
renderMarkdownContent();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
@ -1347,6 +1351,7 @@ function initWikiForm() {
|
||||
wiki: true
|
||||
}, (data) => {
|
||||
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
|
||||
renderMarkdownContent();
|
||||
});
|
||||
};
|
||||
if (!simplemde.isSideBySideActive()) {
|
||||
@ -2484,6 +2489,7 @@ $(document).ready(async () => {
|
||||
initUserHeatmap(),
|
||||
initServiceWorker(),
|
||||
initNotificationCount(),
|
||||
renderMarkdownContent(),
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
5
web_src/js/markdown/content.js
Normal file
5
web_src/js/markdown/content.js
Normal file
@ -0,0 +1,5 @@
|
||||
import {renderMermaid} from './mermaid.js';
|
||||
|
||||
export default async function renderMarkdownContent() {
|
||||
await renderMermaid(document.querySelectorAll('.language-mermaid'));
|
||||
}
|
||||
23
web_src/js/markdown/mermaid.js
Normal file
23
web_src/js/markdown/mermaid.js
Normal file
@ -0,0 +1,23 @@
|
||||
import {random} from '../utils.js';
|
||||
|
||||
export async function renderMermaid(els) {
|
||||
if (!els || !els.length) return;
|
||||
|
||||
const {mermaidAPI} = await import(/* webpackChunkName: "mermaid" */'mermaid');
|
||||
|
||||
mermaidAPI.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'neutral',
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
|
||||
for (const el of els) {
|
||||
mermaidAPI.render(`mermaid-${random(12)}`, el.textContent, (svg, bindFunctions) => {
|
||||
const div = document.createElement('div');
|
||||
div.classList.add('mermaid-chart');
|
||||
div.innerHTML = svg;
|
||||
if (typeof bindFunctions === 'function') bindFunctions(div);
|
||||
el.closest('pre').replaceWith(div);
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -23,3 +23,14 @@ export function isDarkTheme() {
|
||||
export function uniq(arr) {
|
||||
return Array.from(new Set(arr));
|
||||
}
|
||||
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
|
||||
// generate a random string
|
||||
export function random(length) {
|
||||
let str = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
str += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
@ -494,3 +494,11 @@
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mermaid-chart {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
@ -1898,3 +1898,7 @@ footer .container .links > * {
|
||||
.repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
|
||||
color: #2a2e3a;
|
||||
}
|
||||
|
||||
.mermaid-chart {
|
||||
filter: invert(84%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user