Giới thiệu CodeMirror - Khung soạn thảo Code và Markdown hiệu quả

Giới thiệu CodeMirror - Khung soạn thảo Code và Markdown hiệu quả

Những mẩu tin ngắn hàng ngày dành cho bạn
  • Hẳn là nhiều người ở đây đã nghe đến kiểu tấn công bảo mật Clickjacking rồi nhỉ. Kẻ tấn công thường nhúng một website (thường là mục tiêu) vào trong một iframe trên website của chúng, sau đó làm mờ hoặc ẩn nó đi rồi đặt vào vị trí các nút bấm trên web, ví dụ "Bấm vào để nhận quà". Đâu ai ngờ rằng phía trên nút bấm đó là một nút bấm khác trong iframe. Khá nguy hiểm!

    Nhưng trình duyệt đã có cách ngăn chặn kiểu tấn công này bằng các quy tắc như tiêu đề X-Frame-Options, frame-ancestors của CSP và SameSite: Lax/Strict của Cookies...

    Mới đây, đã xuất hiện thêm kiểu tấn công mới - "DoubleClickjacking" 😨. Đại ý là "hắn" lợi dụng hành động double click để lừa người dùng bấm vào một nút mà hắn muốn. Chi tiết hơn trong bài viết này: DoubleClickjacking: A New Era of UI Redressing.

    » Xem thêm
  • Mọi người đã nghe nói đến Jujutsu - jj - một dạng quản lý phiên bản cho mã nguồn (version control system) chưa? Có vẻ như nó đang nhận được nhiều sự quan tâm.

    Chờ xíu! Chẳng phải git đã quá tốt rồi sao? Thế thì chế ra thằng jj để làm gì nữa? Cũng hơi khó trả lời nhỉ? Mỗi công cụ sinh ra chắc chắn phải cải thiện hoặc khắc phục được nhược điểm của cái trước. Cho nên jj ắt hẳn phải làm được điều gì đó mà git chưa làm được nên mới nổi lên như vậy.

    Thật ra mình đã nghe nói đến jj từ vài tháng trước rồi, nhưng vào đọc thì toàn kiến thức cao siêu. Hoặc là đang mang nặng cái lối suy nghĩ của git vào trong đầu rồi nên chưa lĩnh hội ra được điều gì cả.

    Mình hay có kiểu cái gì đọc lần 1 mà không hiểu thì đọc tiếp lần 2, lần 2 không hiểu thì đọc tiếp lần 3... đến lần thứ n mà vẫn không hiểu thì bỏ. Cơ mà không phải là từ bỏ mà một thời gian sau đó quay lại đọc tiếp. Đến một lúc nào đó khả năng mình sẽ hiểu ra một ít vấn đề, thế mới tài 😆.

    Thì cái jj này có vẻ như nó đang mở ra được tính linh hoạt trong việc "cam kết" mã. Tưởng tượng bạn đang làm việc trên một dự án, đang ở nhánh này, muốn sang nhánh khác để sửa, nhưng mà lại đang viết dở ở nhánh này, thế là phải stash, rồi checkout, rồi commit, rồi merge hoặc rebase lại vào nhánh cũ... nhìn chung quá trình làm việc với git nghiêm ngặt đến mức cứng nhắc, cần nhiều thao tác để giải quyết một vấn đề, chưa kể cái cây commit (commit-tree) nữa thì ôi thôi, khỏi xem cho đỡ nhức mắt. Thế nên ông jj này đang làm cách nào đó để bạn khỏi cần phải quan tâm đến các nhánh luôn, sửa trực tiếp vào commit. Nghe ảo nhỉ 😂.

    Đấy mới lĩnh hội được đến đấy, hy vọng sau n lần đọc lại nữa mình sẽ viết được một bài chi tiết hơn về công cụ này.

    » Xem thêm
  • Gòi gòi tới công chiện gòi 🤤🤤🤤

    » Xem thêm

Vấn đề

input, textarea là hai thẻ mà HTML định nghĩa để giúp chúng ta lấy được dữ liệu người dùng nhập vào. input phù hợp trong trường hợp nội dung nhập vào tương đối ngắn và ngược lại - textarea thường là một cái gì đó rất dài và xuống dòng. Sau này tìm hiểu thêm, tôi được biết đến một cách khác nữa để lấy được dữ liệu người dùng là contenteditable, nhưng ngược lại với inputtextarea, contenteditable cho phép người dùng chỉnh sửa trực tiếp mã HTML. Chính vì thế dữ liệu hiển thị trong contenteditable vô cùng đa dạng.

Có một hạn chế là hai thẻ trên chỉ đơn giản là cho người dùng nhập vào những dòng chữ, thuần kí tự. Nếu muốn làm gì đó trong những nội dung này, ví dụ như định dạng chữ, highlight cú pháp, tạo shortcut... thì quả là một vấn đề khó khăn. Do đó, nếu chỉ sử dụng chúng một cách đơn thuần, chúng ta khó mà có thể tạo ra được một trình soạn thảo văn bản có định dạng phong phú. contenteditable thì lại "dính" quá nhiều mã HTML, khó có thể lọc ra được nội dung của người dùng đang nhập. Chưa kể, mỗi trình duyệt lại có cách triển khai contenteditable khác nhau cho nên nhiều khi chúng sẽ hoạt động một cách khó hiểu.

Vì lẽ đó, có khá nhiều thư viện Text Editor được ra đời và cung cấp tính năng soạn thảo, định dạng văn bản rất mạnh mẽ. Có thể kể đến những cái tên như TinyMCE, CKEditor, WYSIWYG... Điểm chung của những công cụ này là chúng có giao diện đẹp mắt, hiện đại, với các thanh công cụ hỗ trợ định dạng văn bản như một trình soạn thảo thực thụ. Sử dụng trong những trường hợp cần nhập vào nội dung không chỉ đơn giản là thuần chữ, mà còn là cách trình bày, định dạng, hình ảnh... Hầu hết chúng đều cho đầu ra là các đoạn mã HTML, chỉ cần lưu lại và trả về cho trình duyệt hiển thị là đã có trang hiển thị "y xì đúc".

Mạnh mẽ là thế nhưng tất cả chúng hầu như lại không đáp ứng được một nhu cầu đơn giản của tôi là trình soạn thảo Markdown với chế độ xem trước (Preview). Nếu lướt qua những cái tên bên trên, có thể bạn sẽ thấy một vài thư viện có cả chế độ Markdown. Tôi đã thử qua chúng và thấy rằng nó vẫn chưa đáp ứng được, hoặc là chỉ làm nửa vời - nghĩa là không hỗ trợ hết cú pháp của markdown...

Khung soạn thảo bài viết

Nhu cầu của tôi khá đơn giản, một cái gì đó nhanh, nhẹ, hỗ trợ highlight cú pháp và có khả năng tùy biến dễ dàng - nghĩa là thêm thắt tính năng nuột nà. Trên đà đó, tôi bắt đầu tìm kiếm sang các keyword khác như là "markdown editor library"... Lúc đó, một ứng cử viên sáng giá xuất hiện là SimpleMDE.

SimpleMDE đúng như cái tên của nó, một trình editor markdown siêu "đơn giản", tập trung vào viết, hỗ trợ hầu như đầy đủ tiêu chí mà tôi cần. Nhưng khi nghiên cứu đến API của SimpleMDE, một cái tên mới xuất hiện là CodeMirror. Đến đây, tôi hiểu rằng SimpleMDE có thể đang sử dụng CodeMirror ở dưới nền. Tiếp tục tìm hiểu thì quả không sai, CodeMirror cũng là một trình soạn thảo markdown và có lẽ là rất mạnh mẽ.

Codemirror

CodeMirror là một thư viện JavaScript mã nguồn mở được sử dụng để tạo ra trình soạn thảo mã trong các ứng dụng web. Nó cung cấp một giao diện tương tác cho người dùng để viết và chỉnh sửa mã nguồn trong nhiều ngôn ngữ lập trình khác nhau. CodeMirror hỗ trợ các tính năng quan trọng như làm nổi bật cú pháp (syntax highlighting), tự động hoàn thành mã (code autocompletion), kiểm tra lỗi (error checking), thay đổi kích thước linh hoạt và nhiều tính năng khác.

CodeMirror thường được sử dụng trong các dự án web-based, chẳng hạn như trình soạn thảo mã nguồn trong các trang web dự án mã nguồn mở, các môi trường phát triển tích hợp (IDEs), trình biên tập blog với hỗ trợ mã, và nhiều ứng dụng web khác đòi hỏi khả năng soạn thảo mã nguồn.

Có rất nhiều lợi ích mà Codemirror mang lại để làm lý do cho tôi và nhiều người khác sử dụng nó như:

  • Làm nổi bật cú pháp (Syntax Highlighting), tự động hoàn thành mã (Code Autocompletion, kiểm tra lỗi (Error Checking):
  • Dễ dàng tạo thêm các phím tắt (Keybindings).
  • Tùy chỉnh giao diện theo sở thích.
  • Kho plugin phong phú hoặc tự tạo thêm plugin cho mình.
  • Tương thích đa nền tảng, đây là cái hết sức cần thiết vì tôi không phải mất thêm thời gian để đi fix lỗi trong nhiều trình duyệt khác nhau.
  • Tài liệu và API rõ ràng, cộng đồng sử dụng lớn nên nhanh chóng tìm được sự trợ giúp trong quá trình phát triển.

Hiện tại tôi đang sử dụng CodeMirror ở hai nơi, một là trình soạn thảo bài viết trong AdminCP, hai là khung bình luận của blog. Mặc dù chưa được tối ưu hóa cho lắm như tôi có thể kiểm soát được tính năng mới cho chúng.

Triển khai

Vì là một thư viện JavaScript nên chúng ta có thể dễ dàng nhúng lên bất kì trang web nào. Hoặc nếu đang sử dụng một thư viện như là Vue, React... thì cũng có nhiều packages biến đổi CodeMirror thành components của thư viện.

Dưới đây là một ví dụ sử dụng CodeMirror cho một khung soạn thảo markdown đơn giản.

import {basicSetup, EditorView} from "codemirror"
import {markdown} from "@codemirror/lang-markdown"
import {languages} from "@codemirror/language-data"

let view = new EditorView({
  doc: "Hello\n\n```javascript\nlet x = 'y'\n```",
  extensions: [
    basicSetup,
    markdown({codeLanguages: languages})
  ],
  parent: document.body
})

Bạn đọc có thể xem thêm nhiều ví dụ hơn nữa tại Try CodeMirror. Hoặc xem thêm ví dụ cụ thể cho từng trường hợp sử dụng tại Examples.

Cao cấp
Hello

Tôi & khao khát "chơi chữ"

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Bạn đã thử viết? Và rồi thất bại hoặc chưa ưng ý? Tại 2coffee.dev chúng tôi đã có quãng thời gian chật vật với công việc viết. Đừng nản chí, vì giờ đây chúng tôi đã có cách giúp bạn. Hãy bấm vào để trở thành hội viên ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.

Bình luận (0)

Nội dung bình luận...
Bấm hoặc cuộn mạnh để sang bài mới