티스토리에서 mermaid적용하는 법(에디터 코드블럭을 이용)

12
15

삽질⛏️/티스토리⛏️

티스토리에서 mermaid적용하는 법(에디터 코드블럭을 이용)

https://mermaid.js.org/config/Tutorials.html

Tutorials | Mermaid

mermaid.js.org

마크다운 상에서 mermaid 문법을 사용하면 도표를 매우 이쁘고 간단하게 그릴 수 있다.

티스토리에서 마크다운으로 작성하는 분들은 https://choewy.tistory.com/155 의 글을 참조하면 된다.

티스토리 에디터에서 글을 작성하면 html로 렌더링되는데, mermaid가 javascript에서 처리되는 과정을 먼저 보면 pre의 class 이름이 mermaid 인걸 잡아서 차트로 변환시키는 것을 알 수 있다.

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

이걸 티스토리 스킨의 head 안에 넣어주면 렌더링처리는 끝났다.

문제는 티스토리의 코드블럭은

<pre><code> </code></pre>

이런 형태이기 때문에, pre의 class이름이 붙을 수 있는 형태가 아니다.

<pre class="mermaid">
            graph LR 
            A --- B 
            B-->C[fa:fa-ban forbidden] 
            B-->D(fa:fa-spinner);
    </pre>

            graph LR 
            A --- B 
            B-->C[fa:fa-ban forbidden] 
            B-->D(fa:fa-spinner);

mermaid가 제대로 작동하려면 위 코드를 HTML코드블럭 삽입으로 처리하면 된다. 하지만 언제까지 매번 이렇게 사용할 수는 없다...

해결방법

아예 코드블럭의 언어로 Delphi를 선택할때를 mermaid로 바꿔보는 작업을 해보자. Delphi라는 언어는 아예 쓸일이 없을 것 같아 이거로 선택했다.

document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll('pre.delphi');

  for (const element of elements) {
    const div = document.createElement('div');
    div.innerHTML = element.textContent;
    div.className = 'mermaid';

    const pre = element.parentElement;
    pre.style.textAlign = 'center';
    pre.removeChild(element);
    pre.appendChild(div);
  }
});

다른 블로그에서 있던걸 조금 수정해봤다. pre 태그의 class이름이 delphi인걸 잡는 코드..라고 이해했다. 이렇게 하면 elements가 <code></code> 덩어리 들로 들어갈 것이기 때문에 수정이 더 필요하다.

document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll('pre.delphi');

  for (const element of elements) {
  	const codeElement = element.querySelector('code');
    const div = document.createElement('div');
    div.innerHTML = codeElement.textContent;
    div.className = 'mermaid';

    const pre = codeElement.parentElement;
    pre.style.textAlign = 'center';
    pre.removeChild(codeElement);
    pre.appendChild(div);
  }
});

이렇게 구성해봤다.

이제 한번 적용해보도록 하겠다.

graph LR 
            A --- B 
            B-->C[fa:fa-ban forbidden] 
            B-->D(fa:fa-spinner);

graph LR             
A --- B             
B-->C[fa:fa-ban forbidden]             
B-->D(fa:fa-spinner);

아주 잘 되는 모습을 볼 수 있다.

적용방법은

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {  
    const elements = document.querySelectorAll('pre.delphi');   
    for (const element of elements) {  	
        const codeElement = element.querySelector('code');    
        const div = document.createElement('div');    
        div.innerHTML = codeElement.textContent;    
        div.className = 'mermaid';     
        
        const pre = codeElement.parentElement;    
        pre.style.textAlign = 'center';    
        pre.removeChild(codeElement);    
        pre.appendChild(div);  
        }
    });
</script>

이 코드를 티스토리 <head></head> 태그 안에 넣고, 안쓰는 코드블럭 언어를 지정해서 사용하면 된다.

도움이 됐다면 댓글이나 공감 버튼 한 번씩 누르고 가주세요! 로그인 안해도 됩니다 ^_^

저작자표시 비영리 동일조건 (새창열림)

COMMENT

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

해결방법

티스토리툴바