Blogger中代码块自动语法识别并颜色高亮

日期：

进入blogger后台主题背景--自定义-修改html

1. 以下代码放在<head>中

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<style>
pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 30px 10px 10px 10px;
    border-radius: 5px;
    white-space: pre-wrap; /* 保留换行和空格 */
    word-wrap: break-word;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    overflow-x: auto;
    position: relative;
    border: 1px solid #444;
    box-shadow: 0 2px 4px #0005;
    margin: 20px 0;
}

.copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #444;
    color: #f8f8f2;
    border: none;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.copy-button:hover {
    background-color: #555;
}

.copy-button::after {
    content: 'Click to Copy';
    position: absolute;
    top: -25px;
    right: 0;
    background-color: #333;
    color: #f8f8f2;
    padding: 5px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s;
}

.copy-button:hover::after {
    opacity: 1;
}

pre code {
    display: block;
    padding: 0;
    background: none;
    border: none;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap; /* 确保 code 也保留换行 */
}
</style>

2. 以下代码放在</body>前

<script type='text/javascript'>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
    // 简单的语言检测函数
    function detectLanguage(codeText) {
        codeText = codeText.toLowerCase();
        if (codeText.includes('function') || codeText.includes('var') || codeText.includes('console.log')) {
            return 'javascript';
        } else if (codeText.includes('<html') || codeText.includes('<div') || codeText.includes('</')) {
            return 'html';
        } else if (codeText.includes('{') && codeText.includes('}') && codeText.includes(':')) {
            return 'css';
        } else if (codeText.includes('def ') || codeText.includes('print(')) {
            return 'python';
        } else {
            return 'plaintext';
        }
    }

    var pres = document.querySelectorAll('pre');
    pres.forEach(function(pre) {
        var existingCode = pre.querySelector('code');
        if (!existingCode) {
            var code = document.createElement('code');
            // 使用 textContent 替代 innerText，以保留换行和空格
            code.textContent = pre.textContent; // 不使用 trim()，保留原始格式
            pre.innerHTML = ''; // 清空 pre
            pre.appendChild(code);
        } else {
            // 如果已有 code 标签，确保保留原始格式
            existingCode.textContent = existingCode.textContent;
        }

        // 获取代码内容并检测语言
        var codeElement = pre.querySelector('code');
        var codeContent = codeElement.textContent;
        var detectedLang = pre.getAttribute('data-lang') || detectLanguage(codeContent);
        codeElement.classList.add('language-' + detectedLang);

        // 添加复制按钮
        if (!pre.querySelector('.copy-button')) {
            var button = document.createElement('button');
            button.classList.add('copy-button');
            button.textContent = 'Copy';
            button.addEventListener('click', function() {
                var text = codeElement.textContent; // 使用 textContent 复制完整格式
                navigator.clipboard.writeText(text).then(function() {
                    button.textContent = 'Copied!';
                    setTimeout(function() {
                        button.textContent = 'Copy';
                    }, 1000);
                }, function() {
                    button.textContent = 'Failed';
                    setTimeout(function() {
                        button.textContent = 'Copy';
                    }, 1000);
                });
            });
            pre.appendChild(button);
        }
    });

    // 触发 Prism.js 高亮
    Prism.highlightAll();
});
//]]>
</script>

评论

发表评论