<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="import">
    <script src="https://unpkg.com/shiki"></script>
</th:block>

<th:block th:fragment="script">

    <script>

        $("article pre>code").each(function () {

            console.log(this.innerHTML)

            // 去除空格以及多余标点
            var codeId = $(this).text().replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\：|\，|\。]/g, '');
            codeId = codeId.toLowerCase();
            if (idArr[codeId]) {
                // id已经存在
                $(this).attr('id', codeId + '-' + idArr[codeId]);
                idArr[codeId]++;
            } else {
                // id未存在
                idArr[codeId] = 1;
                $(this).attr('id', codeId);
            }

            shiki.getHighlighter({
                theme: 'nord'
            }).then(highlighter => {
                const code = highlighter.codeToHtml(`console.log('shiki');`, {lang: 'js'})
                document.getElementById('codeId').innerHTML = code
            })
        })


    </script>
</th:block>
</html>