Hiển thị highlight code khi sử dụng tinymce với react hoặc nextjs

Mình củng từng tìm cách để có thể hiển thị đoạn code giống như các bạn xem code trên phần mềm vscode, sublime text củng được một thời gian và cuối cùng mình củng tìm được nên muốn chia sẽ lại.

Thêm nút hiển thị code trong tinymce

Lúc đầu mình nghỉ thằng tinymce không có nên cứ tìm cách custom button để thêm chức năng thêm đoạn code vào, mò trên google một xíu thấy nó có sẳn rồi bạn chỉ cần khai báo nó trong phần init tinymce là được. Nó là một plugin có sẳn trong tinymce có tên là "codesample" bạn chỉ cần thêm nó vào trong phần plugins của code là nó sẽ xuất hiện.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'codesample',
  toolbar: 'codesample'
});

Hiển thị highlight code ở phía người dùng

Sử dụng hightlight code của tinymce đối với trang web bình thường

Để hiện thị đoạn code này ở phía client thì bạn cần thêm css và đoạn javascript để phát hiện được đoạn code xuất hiện trong bài viết và đổi màu cho đoạn code của bạn. Ở đây thì tinymce họ gợi ý sử dụng Prism.js đơn giản chỉ cần thêm đoạn code sau vào phần header của của website của bạn là được. Bạn nên vào trang chủ của Prism.js để tuỳ chỉnh những thư viện cần sử dụng rồi tải file css và js đã tối ưu về để tiết kiệm dung lượng file nhé.

Bạn có thể vào đây https://prismjs.com/download.html để tuỳ chỉnh vào download những thư viện bạn cần.

<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>
<pre class="language-markup"><code></code></pre>

Sử dụng highlight code đối với website sử dụng reactjs và nextjs

Đối với reactjs và nextjs thì bạn có thể sử dụng thư viện hightlight.js nó có sẳn trên npm nên bạn chỉ cần cài đặt và sử dụng nó một cách đơn giản và tối ưu dung lượng cho website vì khi sử dụng qua thư viện highlight.js bạn chỉ chọn những ngôn ngữ mà bạn sử dụng.

Để cài đặt bạn có thể cài đặt bằng npm hoặc yarn

npm install highlight.js
# or
yarn add highlight.js

Sau khi cài đặt xong bạn cần import những thư viện cần sử dụng vào, bạn có thể tham khảo thêm những thư viện mà highlight.js hỗ trợ tại trang chủ. Ở dưới là đoạn code của mình sử dụng 3 ngôn ngữ là javascript, bash, css sau khi import xong các bạn nhớ register để báo cho thằng highlight.js biết là bạn cần sử dụng những ngôn ngữ này. Đoạn cuối cùng là import đoạn css mà bạn muốn code hiển thị như thế nào ở đây mình chọn theme "solarized-dark.css" bạn có thể tham khảo thêm nhiều style khác ở trang chủ highlight.js nhé.

Xem thêm nhiều ngôn ngữ mà highlight.js hỗ trợ tại đây https://highlightjs.org/static/demo/

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript'; // import những ngôn ngữ mà bạn muốn sử dụng
import bash from 'highlight.js/lib/languages/bash';
import css from 'highlight.js/lib/languages/css';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('css', css);
hljs.registerLanguage('bash', bash);
import 'highlight.js/styles/base16/solarized-dark.css'; //Chọn theme hiển thị cho đoạn code, bạn có thể tham khảo theme tại đây https://highlightjs.org/

Thêm đoạn useEffect để highlight.js tìm và chuyển đoạn cần hiển thị sang highlight code

useEffect(() => {
        hljs.initHighlighting();
    }, [])

Như vậy là bạn đã cài đặt thành công highlight.js và hiển thị nó ở phía người dùng lẫn phía quản trị.