Как заставить GitHub Pages Markdown поддерживать диаграмму русалки? - PullRequest
Новая
       14

Как заставить GitHub Pages Markdown поддерживать диаграмму русалки?

0 голосов
/ 21 декабря 2018

Я надеюсь использовать русалку на GitHub-страницах с простым коммитом и push.

Другими словами, я надеюсь написать в моем файле уценки, как этот 

```mermaid
graph LR
   A --> B
   A -->C
   C -->D
```

и добавить несколько js в мой _layouts / post.html, чтобы каким-то образом преобразовать это в граф русалок.

Я нашел эту тему утверждает, что она поддерживает такую ​​вещь.Но эта тема выглядит слишком тяжелой для меня, js было слишком много, поэтому я подумал, что могу использовать только этот файл , который просто 

<script>
 window.Lazyload.js('{{ _sources.mermaid }}', function() {
   mermaid.initialize({
     startOnLoad: true
   });
   mermaid.init(undefined, '.language-mermaid');
 });
</script>

В моей _include / mermaid.html, я заменил {{ _sources.mermaid }} на русалку cdn 

<script>
 window.Lazyload.js('https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js', function() {
   mermaid.initialize({
     startOnLoad: true
   });
   mermaid.init(undefined, '.language-mermaid');
 });
</script>

, она все равно не будет работать.В моем посте это было показано как обычные блоки кода, а не как диаграмма русалки.

Редактировать: По мнению разработчика Chrome, я не вижу никаких соединений с этой ссылкой https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js.

И я попробовал этот код, соединение с русалкой было сделано в теге network в представлении разработчика, но диаграмма русалки все еще не работает 

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
    startOnReady:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>

Ответы [ 2 ]

0 голосов
/ 22 декабря 2018

Я нашел решение. 

<!DOCTYPE html>
<html lang="en">
   <head>
	 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
    </head>
	 
<body>
 <pre><code class="language-mermaid">graph LR
A--&gt;B
график LR A -> B var config = {startOnLoad: true, тема: 'forest', блок-схема: {useMaxWidth: false, htmlLabels: true}};mermaid.initialize (конфигурации);window.mermaid.init (undefined, document.querySelectorAll ('. language-mermaid'));
0 голосов
/ 21 декабря 2018

URL, который вы пытались использовать, не существует.Это правильный URL:

https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

...