39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
<!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> |