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

Я надеюсь использовать русалку на страницах GitHub с простой фиксацией и нажатием.

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

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

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

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

<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>

person water liu    schedule 21.12.2018    source источник


Ответы (5)


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

<!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
</code></pre>

<div class="mermaid">graph LR
A--&gt;B
</div>
	
</body>
<script>
var config = {
    startOnLoad:true,
    theme: 'forest',
    flowchart:{
            useMaxWidth:false,
            htmlLabels:true
        }
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>

</html>

person water liu    schedule 22.12.2018
comment
как вы запускаете html-коды на github, я не думаю, что это возможно? - person Firesh; 22.06.2021

Если вы используете Jekyll и не возражаете против использования плагина, я думаю, что приведенное ниже может помочь вам сделать это проще.

jekyll-spacehip - ???? Плагин Jekyll для обеспечения мощной поддержки table, mathjax, plantuml, mermaid, youtube, emoji, vimeo, dailymotion и т. д.

https://github.com/jeffreytse/jekyll-spaceship

Есть два способа создать диаграмму на странице вашего блога Jekyll:

```mermaid!
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
```

or

@startmermaid
pie title Pets adopted by volunteers
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 35
@endmermaid

Код выше будет проанализирован как:

введите описание изображения здесь

person J.T.    schedule 22.06.2020

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

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

person Lajos Arpad    schedule 21.12.2018
comment
извините, я обновил ссылку, но результат все равно неверный. - person water liu; 21.12.2018
comment
@waterliu - это код внутри функции, который вообще выполняется? - person Lajos Arpad; 21.12.2018
comment
извините, я понятия не имею, что это значит ... Я мало разбираюсь в js. Могу только сказать, что это все js в моем посте. Никаких других тегов ‹script›. - person water liu; 21.12.2018
comment
@waterliu вставить команду отладчика; как первая операция функции кода, который вы указали. Откройте инструменты разработчика вашего браузера и загрузите свою страницу. Если код внутри функции выполняется, ваш код должен сразу перейти к нему. В инструментах разработчика на вкладке «Источники» проверьте свой Javascript. Он обновился? - person Lajos Arpad; 21.12.2018
comment
Позвольте нам продолжить это обсуждение в чате. - person water liu; 21.12.2018

Я решил это купить, установив расширение Github Mermaid в браузере. На самом деле у них есть поддержка Chrome, Opera и Firefox.

Я использую Chrome: https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe?hl=en

введите описание изображения здесь

person Hafed Gabroun    schedule 05.11.2020

У меня была аналогичная проблема, и в итоге я просто использовал собственный плагин jekyll. Если вы можете использовать настраиваемые плагины, следующие блоки кода уценки для русалки заменят на элементы.

Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  docExt = post.extname.tr('.', '')
  # only process if we deal with a markdown file
  if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/```mermaid([^`]+?)```/, '<div class="mermaid">\1</div>')
    post.content = newContent
  end
end
person harper357    schedule 05.02.2020