티스토리엔 다음과 같이 코드 블럭을 넣을 수 있습니다.

#include <iostream>
#include <vector>

using namespace std;

int doubleDotProduct(const vector<int>& a, const vector<int>& b);

int main() {
    vector<int> vec1 = {1, 2, 3};
    vector<int> vec2 = {4, 5, 6};
    
    int result = doubleDotProduct(vec1, vec2);
    cout << "The double of the dot product is: " << result << endl;
    
    return 0;
}

티스토리에서 자체 지원하는 기능이라 사용이 매우 간편합니다.

 

그런데 ``인라인 코드``를 넣으려면 어떻게 해야 할까요?

마크다운 에디터를 쓰거나 html 에디터로 가서 ``<code>``와 ``</code>``를 필요한 곳에 일일이 지정해 주어야 했습니다.

일반 에디터에서도 지원하는데 제가 멍청해서 찾지 못해, 헛수고한 것이라면 다행입니다만...

아무리 찾아봐도 안보여서 스크립트 형태로 만들었습니다.

 

1. 스크립트

마크다운에선 백틱으로 감싸면 인라인 코드 블럭 지정이 가능합니다.

이걸 그대로 갖다 쓰고 싶어서 똑같이 동작하게 만들었습니다.

 

const config = window.codeWrapperConfig || {
    startWrapper: "`",
    endWrapper: "`"
};

``startWrapper``와 ``endWrapper``에서 래핑 영역을 지정해 줄 문자를 설정할 수 있습니다.

 

const replaceCodeTags = (node, startWrapper, endWrapper) => {
    if (node.nodeType === Node.ELEMENT_NODE) {
        if (node.classList.contains('MathJax') || node.classList.contains('MathJax_Preview')) {
            return;
        }
    }
    if (node.nodeType === Node.TEXT_NODE) {
        const regex = new RegExp(escapeRegExp(startWrapper) + "(.*?)" + escapeRegExp(endWrapper), 'g');
        let lastIndex = 0;
        let newNodes = [];
        let match;

        while ((match = regex.exec(node.textContent)) !== null) {
            const [fullMatch, codeContent] = match;
            const matchIndex = match.index;

            if (matchIndex > lastIndex) {
                newNodes.push(document.createTextNode(node.textContent.slice(lastIndex, matchIndex)));
            }

            const codeElement = document.createElement('code');
            codeElement.textContent = codeContent;
            newNodes.push(codeElement);

            lastIndex = matchIndex + fullMatch.length;
        }

        if (lastIndex < node.textContent.length) {
            newNodes.push(document.createTextNode(node.textContent.slice(lastIndex)));
        }

        if (newNodes.length > 0) {
            const parent = node.parentNode;
            newNodes.forEach(newNode => parent.insertBefore(newNode, node));
            parent.removeChild(node);
        }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
        Array.from(node.childNodes).forEach(child => replaceCodeTags(child, startWrapper, endWrapper));
    }
};

조금 길지만 하는 일은 간단합니다.

  1. 정규식으로 래핑 대상을 찾는다
  2. 래핑 후 텍스트를 새로운 노드로 대체
  3. 해당 노드에 자식 노드가 있을 경우에도 모두 찾아서 대체

 

const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

const startReplacement = () => replaceCodeTags(document.body, config.startWrapper, config.endWrapper);

document.addEventListener("DOMContentLoaded", () => {
    startReplacement();
});

window.startReplacement = startReplacement;

정규식 이스케이프 처리도 잊지 않았습니다.

페이지 로드가 완료됐을 때 호출되도록 ``DOMContentLoaded`` 리스너도 설정했습니다.

 

이대로만 해도 적용할 수 있지만, 저는 MathJax도 같이 사용하고 있습니다.

아래의 예시는 MathJax와 스크립트를 동시에 사용하는 예제입니다.

 

이 문장은 수학 표현식 $x^2 + y^2 = z^2$ 와 ``코드 블록``을 포함하고 있습니다.

 

MathJax 로드가 먼저 되면 래핑 스크립트가 제대로 동작하지 않아서,

래핑 후 수식 변환을 진행할 수 있도록 추가적인 스크립트를 작성했습니다.

 

// MathJax 설정
window.MathJax = {
    tex2jax: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
};

// DOMContentLoaded 이벤트 후 CodeTagger 스크립트를 로드하고 실행
document.addEventListener("DOMContentLoaded", function () {
    function loadScript(url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.onload = callback;
        document.head.appendChild(script);
    }

    // CodeTagger.js 로드
    loadScript("https://ayumudayo.github.io/TistoryCodeTagger/CodeTagger.js", function () {
        console.log("CodeTagger script loaded.");
        if (typeof startReplacement === "function") {
            startReplacement();

            // MathJax 스크립트 로드 후 수식 처리
            loadScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML", function () {
                console.log("MathJax script loaded.");
                MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
            });
        }
    });
});

래퍼 스크립트를 먼저 로드하고 래핑을 진행한 후 수식 처리를 하게 했습니다.

이걸 단일 스크립트 파일 안에서 처리하려고 시도했는데 잘 안 됐습니다.

테스트용 깡통 html에선 됐지만, 티스토리에선 원하는 결과를 얻을 수 없어 밖으로 따로 빼야 했습니다.

 

 

2. 적용법

최종적으로 티스토리에 넣어야 할 스크립트는 아래와 같습니다.

 

MathJax를 사용할 경우

// Wrapper 설정정
window.codeWrapperConfig = {
    startWrapper: "``",
    endWrapper: "``"
};

// MathJax 설정
window.MathJax = {
    tex2jax: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
};

// DOMContentLoaded 이벤트 후 CodeTagger 스크립트를 로드하고 실행
document.addEventListener("DOMContentLoaded", function () {
    function loadScript(url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        script.onload = callback;
        document.head.appendChild(script);
    }

    // CodeTagger.js 로드
    loadScript("https://ayumudayo.github.io/TistoryCodeTagger/CodeTagger.js", function () {
        console.log("CodeTagger script loaded.");
        if (typeof startReplacement === "function") {
            startReplacement();

            // MathJax 스크립트 로드 후 수식 처리
            loadScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML", function () {
                console.log("MathJax script loaded.");
                MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
            });
        }
    });
});

``<head>``태그 안에 ``<script>``태그로 감싸서 넣어야 합니다.

 

MathJax를 사용하지 않을 경우

<script>
    window.codeWrapperConfig = {
        startWrapper: '``',
        endWrapper: '``'
    };
</script>
<script src="https://ayumudayo.github.io/TistoryCodeTagger/CodeTagger.js"></script>

위와 동일하게 ``<head>``태그 안에 넣으면 됩니다.

 

 

3. 샘플

이 문장은 ``코드``를 포함하고 있습니다.


이 문장은 또 다른 ``코드 블록``을 포함하고 있습니다.


이 문장은 수학 표현식 $x^2 + y^2 = z^2$ 와 ``코드 블록``을 포함하고 있습니다.

 

 

코드블럭 및 수식이 정상적으로 변환됐습니다.

 

제 환경에선 문제가 없지만 혹시 문제가 있다면 이슈를 넣어주세요.

능력이 되는 한 만져보겠습니다.

 

Github Repo : TistoryCodeTagger

 

 

테스트용 깡통 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Tagger</title>
    <style>
        .str {
            color: white;
        }

        body {
            background-color: black;
        }
    </style>
    <script>
        // 설정 스크립트
        window.codeWrapperConfig = {
            startWrapper: "``",
            endWrapper: "``"
        };

        // MathJax 설정
        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$'], ['\\(', '\\)']]
            }
        };

        // DOMContentLoaded 이벤트 후 CodeTagger 스크립트를 로드하고 실행
        document.addEventListener("DOMContentLoaded", function () {
            function loadScript(url, callback) {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = url;
                script.onload = callback;
                document.head.appendChild(script);
            }

            // CodeTagger.js 로드
            loadScript("CodeTagger.js", function () {
                console.log("CodeTagger script loaded.");
                if (typeof startReplacement === "function") {
                    startReplacement();

                    // MathJax 스크립트 로드 후 수식 처리
                    loadScript("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML", function () {
                        console.log("MathJax script loaded.");
                        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                    });
                }
            });
        });
    </script>
</head>

<body>
    <div class="str">
        <p>이 문장은 ``코드``를 포함하고 있습니다.</p>
        <p>이 문장은 또 다른 ``코드 블록``을 포함하고 있습니다.</p>
        <p>이 문장은 수학 표현식 $x^2 + y^2 = z^2$ 와 ``코드 블록``을 포함하고 있습니다.</p>
    </div>
</body>

</html>

'Study > Javascript' 카테고리의 다른 글

[Node.js] Python으로부터 넘어오다  (0) 2024.01.27

티스토리툴바