Cách tùy chỉnh Blog CSDN

Truy cập vào giao diện quản trị Blog CSDN, vào mục "Cài đặt".

• Tùy chỉnh CSS trong phần "Mã CSS tùy chỉnh trang".
• Thêm các thẻ JavaScript và mã tương ứng trong phần "Mã HTML chân trang".

Tối ưu hóa kiểu Markdown trên Blog CSDN (số dòng mã, thông tin bản quyền, mục lục chương, v.v.) Cách tùy chỉnh chủ đề làm nổi bật cú pháp trên Blog CSDN và chia sẻ chủ đề màu đen mà tôi đang sử dụng

Làm thế nào để thêm tính năng làm nổi bật cú pháp cho các ngôn ngữ không phổ biến như Kotlin?

Blog CSDN sử dụng plugin highlightjs để hiển thị màu sắc và làm nổi bật cú pháp. Bạn có thể thấy tham chiếu đến highlightjs trong mã nguồn của trang blog. Nguyên lý làm nổi bật của highlightjs là bọc các phần tử như từ khóa, số, chuỗi trong phạm vi của thẻ <pre> bằng thẻ <span> và thêm các class chuyên dụng. highlightjs hiện hỗ trợ 176 ngôn ngữ, nhưng các ngôn ngữ không "phổ biến" cần phải có gói ngôn ngữ tương ứng. Ở đây, "ngôn ngữ không phổ biến" là những ngôn ngữ nằm ngoài 23 ngôn ngữ phổ biến thuộc nhóm Common trên trang tải xuống của highlightjs.

Tài liệu sử dụng: How to use highlight.js Trang tải xuống: Getting highlight.js Trình diễn làm nổi bật cú pháp: highlight.js demo Gói ngôn ngữ Kotlin và các ngôn ngữ khác: highlight.js - cdnjs.com

Cách tham chiếu gói ngôn ngữ Kotlin:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/kotlin.min.js"></script>

※ Thêm đoạn mã trên vào "Mã HTML chân trang"

Mặc dù trang blog đã tải xong và áp dụng làm nổi bật cú pháp, nhưng do thiếu gói ngôn ngữ, mã Kotlin bị nhận dạng nhầm là kịch bản Nginx. Mã đã được render và được thêm thẻ <span>. Do đó, để render lại, trước tiên bạn cần khôi phục mã về trạng thái ban đầu. Đoạn mã JavaScript sau sẽ xóa các thẻ HTML trong thẻ <pre> ngoại trừ thẻ <code>, sau đó cho phép highlightjs render lại dưới điều kiện đã tham chiếu gói ngôn ngữ tương ứng.

<script type='text/javascript'>
    var boSungBlog = {
        khoiPhucCode: function(){
            var blockCode = $("pre"); // Chọn phần cần thay đổi
            if(blockCode && blockCode.length){
                blockCode.each(function() {
                    var phanTu = $(this);
                    // Loại bỏ các thẻ HTML bên trong, sau đó bọc lại bằng thẻ code ban đầu
                    // Điều này là cần thiết vì chúng ta cần làm nổi bật cú pháp lại, và phạm vi render của highlightjs là mã bên trong thẻ code
                    phanTu.html("<code>" + phanTu.html().replace(/<[^>]+>/g,"") + "</code>"); 
                })
            }
        },
        chayTatCa: function () {
            /* Chạy tất cả các hàm
             * khoiPhucCode() - Xóa các thẻ trong mã
             */ 
            this.khoiPhucCode();
            hljs.initHighlightingOnLoad(); // Render lại, áp dụng làm nổi bật cú pháp
        }
    }
    boSungBlog.chayTatCa();
</script>

※ Thêm đoạn mã trên vào "Mã HTML chân trang"

Hãy xem kết quả. Mã Kotlin dưới đây được đánh dấu bằng cú pháp Markdown ````kotlin`.

fun <T, R> Collection<T>.fold(
    initial: R, 
    combine: (acc: R, nextElement: T) -> R
): R {
    var accumulator: R = initial
    for (element: T in this) {
        accumulator = combine(accumulator, element)
    }
    return accumulator
}

Làm thế nào để thêm số dòng cho mã?

Câu trả lời là sử dụng highlightjs-line-numbers.js. Plugin này sẽ chèn mã đã được render bởi plugin highlightjs vào một bảng, sau đó thêm số dòng.

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>

※ Thêm đoạn mã trên vào "Mã HTML chân trang"

// ...
        chayTatCa: function () {
            this.khoiPhucCode();
            hljs.initHighlightingOnLoad(); // Render lại, áp dụng làm nổi bật cú pháp
            hljs.initLineNumbersOnLoad(); // Thêm số dòng cho mã
        }
// ...

※ Thêm đoạn mã trên vào "Mã HTML chân trang"