Hiển thị code bằng highlight js P1

Mục lục

Hiển thị code bằng highlight js để làm chức năng hiển thị code lên website cho người dùng xem trên bài viết

Hiển thị code bằng highlight js Để sử dụng thư viện highlight.js để hiển thị và làm nổi bật cú pháp của mã nguồn (code) trên website, bạn có thể thực hiện các bước sau:

Bước 1: Thêm Highlight.js vào Website

Bạn có thể tích hợp thư viện highlight.js bằng cách sử dụng CDN hoặc tải trực tiếp thư viện về.

Sử dụng CDN:

Thêm đoạn mã sau vào phần <head> của file HTML của bạn để tích hợp Highlight.js:

<!-- Thêm highlight.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

<!-- Thêm highlight.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

Tải xuống thư viện (tùy chọn):

Bạn có thể tải thư viện trực tiếp từ trang chủ: https://highlightjs.org/download/ và thêm các file CSS, JS vào project của bạn.

Bước 2: Khởi tạo Highlight.js

Sau khi đã thêm các file cần thiết, bạn cần khởi tạo highlight.js. Thêm đoạn mã JavaScript sau vào cuối file HTML hoặc sau khi tài liệu đã được tải xong:

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
</script>

Bước 3: Sử dụng Highlight.js trong HTML

Để hiển thị code, bạn chỉ cần đặt mã nguồn của mình vào các thẻ <pre><code>, ví dụ:

<pre><code class="language-javascript">
// Đây là đoạn mã JavaScript
function helloWorld() {
  console.log("Hello, world!");
}
</code></pre>

Trong ví dụ trên, cú pháp JavaScript sẽ được làm nổi bật. Bạn có thể thay language-javascript bằng các ngôn ngữ khác như language-python, language-css, v.v.

Bước 4: Tùy chọn thêm giao diện (Theme)

Bạn có thể thay đổi giao diện mặc định bằng cách thay thế URL của file CSS. Ví dụ, sử dụng giao diện “monokai-sublime”:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css">

Bạn có thể tìm các theme khác tại: Danh sách theme của Highlight.js.

Bước 5: Kiểm tra và tuỳ chỉnh

Sau khi hoàn thành các bước trên, khi bạn thêm mã nguồn vào bài viết, nó sẽ được hiển thị với cú pháp được làm nổi bật. Bạn cũng có thể tùy chỉnh thêm theo nhu cầu bằng cách sử dụng CSS hoặc JavaScript để kiểm soát chi tiết giao diện của các đoạn mã.

Chúc bạn thành công!

Tôi muốn show line

Để hiển thị số dòng (line numbers) cho các đoạn mã nguồn được làm nổi bật bằng highlight.js, bạn cần cài đặt thêm plugin hỗ trợ cho tính năng này.

Cách thực hiện:

Bước 1: Thêm Plugin hiển thị số dòng

highlight.js không hỗ trợ hiển thị số dòng trực tiếp, vì vậy bạn cần tích hợp plugin highlightjs-line-numbers.js. Dưới đây là cách thêm plugin này từ CDN.

Thêm dòng sau vào <head> của bạn, sau khi đã thêm các file chính của highlight.js:

<!-- Thêm CSS của highlight.js (như ở bước trước) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

<!-- Thêm highlight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

<!-- Thêm plugin highlightjs-line-numbers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

Bước 2: Khởi tạo Highlight.js và plugin số dòng

Sau khi thêm các file cần thiết, bạn khởi tạo highlight.js như bình thường và sau đó kích hoạt plugin hiển thị số dòng:

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('pre code').forEach((block) => {
      hljs.highlightBlock(block);
      hljs.lineNumbersBlock(block); // Kích hoạt số dòng
    });
  });
</script>

Bước 3: Sử dụng trong HTML

Tương tự như trước, bạn sử dụng thẻ <pre><code> để chèn mã nguồn, plugin sẽ tự động thêm số dòng:

<pre><code class="language-javascript">
// Đây là đoạn mã JavaScript có số dòng
function helloWorld() {
  console.log("Hello, world!");
}
</code></pre>

Bước 4: Tùy chỉnh giao diện (CSS)

Nếu bạn muốn tùy chỉnh giao diện của số dòng, bạn có thể thêm CSS để điều chỉnh. Plugin sẽ tự động thêm lớp CSS là .hljs-line-numbers, bạn có thể điều chỉnh bằng cách:

<style>
  /* Tùy chỉnh cách hiển thị số dòng */
  .hljs-line-numbers {
    text-align: right;
    padding-right: 10px;
    border-right: 1px solid #ddd;
    color: #888;
  }

  .hljs-line-numbers span::before {
    color: #555; /* Màu của số dòng */
  }
</style>

Kết quả

Khi hoàn thành các bước trên, số dòng sẽ được hiển thị bên cạnh mã nguồn của bạn. Bạn có thể điều chỉnh CSS thêm để phù hợp với thiết kế của website.

Full Code

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code Viewer</title>
    <link rel="stylesheet" href="styles.css" />
    <!-- Thêm highlight.js CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
    />

    <!-- Thêm highlight.js JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css"
    />

    <!-- Thêm plugin highlightjs-line-numbers -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", (event) => {
        document.querySelectorAll("pre code").forEach((block) => {
          hljs.highlightBlock(block);
        });
      });
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", (event) => {
        document.querySelectorAll("pre code").forEach((block) => {
          hljs.highlightBlock(block);
          hljs.lineNumbersBlock(block); // Kích hoạt số dòng
        });
      });
    </script>
    <style>
      /* Tùy chỉnh cách hiển thị số dòng */
      .hljs-line-numbers {
        text-align: right;
        padding-right: 10px;
        border-right: 1px solid #ddd;
        color: #888;
      }

      .hljs-line-numbers span::before {
        color: #555; /* Màu của số dòng */
      }
    </style>
  </head>
  <body>
    <h1>HTML Code Viewer</h1>
    <pre><code class="language-javascript">
        // Đây là đoạn mã JavaScript
        function helloWorld() {
          console.log("Hello, world!");
        }
        </code></pre>

    <div class="code-container">
      <div class="toolbar">
        <button id="runButton">Chạy mã</button>
      </div>
      <textarea id="codeEditor" class="code-editor" rows="10">
<!DOCTYPE html>
<html>
<body>
<h2>Ví dụ về HTML</h2>
<p>Đây là một đoạn văn!</p>
</body>
</html>
        </textarea
      >
      <iframe id="resultFrame" class="result-frame"></iframe>
    </div>

    <script src="script.js"></script>
  </body>
</html>

script.js

document.getElementById('runButton').addEventListener('click', function() {
    var code = document.getElementById('codeEditor').value;
    var iframe = document.getElementById('resultFrame');
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(code);
    iframe.contentWindow.document.close();
});

styles.css

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    text-align: center;
}

.code-container {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.toolbar {
    text-align: right;
    margin-bottom: 10px;
}

#runButton {
    background-color: #4CAF50;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#runButton:hover {
    background-color: #45a049;
}

.code-editor {
    width: 100%;
    height: 200px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.result-frame {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

Chúc bạn thành công!

Đây là kết quả

Khi thêm xong hightlight.js thì sẽ có thêm show number