Share Viết mã lập trình ngay trên website với thư viện CodeMirror

[filiallion]

Language

Tiếng Việt

Trên các website thông thường các bạn thường tích hợp trình soạn thảo văn bản như TinyMCE, CKEditor để tiện cho việc đăng nội dung. Nếu các bạn quan tâm tới trình soạn thảo văn bản TinyMCE, các bạn có thể tham khảo bài viết "Tích hợp trình soạn thảo văn bản TinyMCE vào website". Đối với các website có nội dung về lập trình thì việc tích hợp một trình soạn thảo mã lập trình cũng cần thiết. Thư viện CodeMirror sẽ giúp các bạn tạo ra trình soạn thảo mã lập trình một cách nhanh chóng và đơn giản. Các bạn cũng có thể sử dụng thư viện CodeMirror để xây dựng một số ứng dụng nhỏ như chạy mã lệnh JavaScript trực tuyến chẳng hạn.

Thư viện CodeMirror là một bộ thư viện JavaScript được phát triển từ rất lâu và tới thời điểm này nó vẫn còn được sử dụng khá phổ biến. Tất cả cũng bởi khả năng đáp ứng cũng như sự đơn giản mà thư viện CodeMirror cung cấp cho người dùng. Để sử dụng thư viện CodeMirror, các bạn truy cập địa chỉ https://codemirror.net để tải về và tích hợp vào website với nội dung mã lệnh HTML như sau:

<link href="path/to/codemirror.css" rel="stylesheet">
<script src="path/to/codemirror.js"></script>

Các bạn tạo một textarea như sau:

<textarea id="codemirror"></textarea>

Sau đó cài đặt thư viện CodeMirror với nội dung mã lệnh JavaScript như sau:

var editor = CodeMirror.fromTextArea(document.getElementById('codemirror'), {
    lineNumbers: true
});

Thư viện CodeMirror hỗ trợ rất nhiều tuỳ chỉnh và plugin nâng cao giúp các bạn có thể dễ dàng tuỳ chỉnh trình soạn thảo theo ý muốn của mình mà không gặp bất kỳ khó khăn nào. Các bạn có thể tìm hiểu thêm về thư viện CodeMirror tại địa chỉ https://codemirror.net/doc/manual.html.