Nhúng code vào bài blog trên Medium và WordPress

Viết bài trên Medium có một cái rất khó chịu đó là syntax highlighting không được hỗ trợ. Suy cho cùng thì Medium không phải được làm ra chỉ để cho người lập trình.

Và có lẽ Medium cũng sẽ không bao giờ hỗ trợ vì nó đã có embed và một mớ dịch vụ hỗ trợ embed như codepen, jsfiddle, v.v..

Nếu bạn thấy font trên trang này lỗi, hãy cài extension của 12bit để font đẹp và dễ đọc hơn:
Bản dành cho Chrome tại đây
Bản dành cho Firefox tại đây.

Bây giờ chúng ta cùng tìm hiểu sơ qua những dịch vụ này và xem nó trông như thế nào khi được embed vào Medium. Các tiêu chí đánh giá như sau:

  1. Dễ đọc hay không?
    Font chữ, màu sắc, layout
  2. Dễ viết hay không?
    Có dễ viết code trong tool đó không?
  3. Đẹp không?
    Màu sắc của embed, màu code.
  4. Hỗ trợ tương tác tốt không?
    Có hỗ trợ chạy hoặc sửa code, có console không?

Nhưng trước hết, hãy nói về code block.

Code block

Medium hỗ trợ cú pháp giống markdown, bạn có thể bao quanh inline code với một cặp dấu ` và ba dấu như vậy để tạo thành một đoạn code như sau:

// Code của bạn ở đây

Nhìn thì khá hợp với style của medium, nhưng điều này lại không đúng với đoạn code sau:

let handler = {
prevNumber: 0,
cachedValue: 0,
apply (target, thisArg, argumentsList) {
if (this.prevNumber === argumentsList[0]) {
return this.cachedValue
}
this.prevNumber = argumentsList[0]
return this.cachedValue = Reflect.apply(target, thisArg, argumentsList)
}
}
function expensiveCompute(number){
console.count('Real compute!')
return number * 10
}
let proxyExpensiveCompute = new Proxy(expensiveCompute, handler)
console.log(proxyExpensiveCompute(11))
console.log(proxyExpensiveCompute(12))
console.log(proxyExpensiveCompute(12))

Nó trở nên khá nó đọc, nhất là mấy chỗ xuống dòng. Vậy hãy xem những dịch vụ của bên thứ ba có gì đáng để dùng nhé.

Đánh giá

  1. Dễ đọc hay không?
    Dễ đọc khi code ít, khó đọc khi code nhiều.
  2. Dễ viết hay không?
    Rất dễ viết.
  3. Đẹp không?
    Đẹp khi code ít, Xấu khi code nhiều. Không highlighting.
  4. Hỗ trợ tương tác tốt không?
    Không hỗ trợ tương tác. Bạn không thể chạy code được.

Kết luận:

Nên dùng cho những đoạn code nhỏ.
Không nền dùng cho những trường hợp còn lại.

Từ đoạn này trở đi sẽ có nhiều embed, có lẽ nó sẽ làm trình duyệt của bạn hơi lag một tí.

Gist

Khá quen thuộc và khá đẹp, bạn nên chọn nó nếu như không chọn những dịch vụ mà mình sẽ nói đếu sau đây cũng như không chọn cách mà mình đã nói phía trên đây:

Codepen

Cái này thì quá là quen thuộc. Không phải chỉ là để code và share mà còn là nơi lưu trữ snippet, tìm hiệu ứng cho project, và để học hỏi. Khi có thời gian mình cũng hay lên đây, duyệt qua các pen, nếu thấy pen nào hay thì đọc xem họ làm như thế nào và fork lại một bản để đề phòng họ xóa nó mất. Nhưng hãy xem embed của nó trông như thế nào:

Như trong embed trên, bạn sẽ không thấy được code, chỉ thấy được kết quả mờ mờ. Nếu muốn tương tác thì phải ấn vào nút Run Pen. Như vậy thì rõ là không tiện dụng cho chức năng highlighting rồi. Mình chọn nó để nói là vì nó cũng hỗ trợ nhiều cho việc demo code, và mình cũng hay dùng nó trong 12bit.

Codepen cũng hỗ trợ vài tùy chọn như theme, chiều cao, cho edit code hay không. Đáng tiếc là nó không khả dụng ở chế độ oEmbed, nghĩa là không thể dùng bằng cách dán URL và ấn enter (trong medium và WordPress). Chỉ hỗ trợ khi dùng iframe hoặc thư viện javascript của codepen. Nên thôi bỏ qua, xem như không có.

Đánh giá

  1. Dễ đọc hay không?
    Không, không thể đọc code ngay lập tức được. Chiều cao cố định, phải scroll khi code dài. font chữ nhỏ.
  2. Dễ viết hay không?
    Chỉ có thể viết và edit ở site ngoài, nhưng editor thông minh.
  3. Đẹp không?
    Code khá đẹp. UI không hợp với medium.
  4. Hỗ trợ tương tác tốt không?
    Không hỗ trợ. không thể edit code.

Kết luận:

Nên dùng khi muốn hiển thị một demo HTML, CSS, JS hoàn chỉnh.
Không nên dùng khi bạn muốn show một đoạn javascript, css hoặc html nhỏ.

JSFiddle

Mình không hay dùng, vì chủ yếu mình code bên codepen. Bạn này cũng chỉ tập trung chính vào làm editor chứ không làm thêm mấy chức năng khác như codepen. Thiết kế của bạn ấy gọn đẹp, thanh tao và tinh tế chứ không to và “thô lỗ” như codepen. Hãy xem embed này nhé:

Style của bạn ấy rõ là rất đẹp, dù rằng font chữ nhỏ và khó đọc, code cũng được show ra trực tiếp, thẻ mặc định là JavaScript chứ không phải Result, chứng tỏ bạn ấy vẫn khá tập trung vào editor.

Cũng như codepen, bạn ấy hỗ trợ embed code bằng iframe và js với nhiều option, nhưng lại không có option nào cho oEmbed.

Đánh giá

  1. Dễ đọc hay không?
    Font nhỏ, nhưng code hiển thị trực tiếp, có thể đọc ngay mà không cần click. Chiều cao cố định, phải scroll nếu code dài.
  2. Dễ viết hay không?
    Chỉ có thể viết và edit ở site ngoài, nhưng editor thông minh.
  3. Đẹp không?
    Khá đẹp và hợp với medium.
  4. Hỗ trợ tương tác tốt không?
    Không hỗ trợ. Không thể edit code.

Kết luận:

Nên dùng khi cần hiển thị một demo HTML, CSS, JS hoàn chỉnh, nhưng bạn lại chú trọng vào code hơn là demo.
Không nên dùng khi bạn muốn show một đoạn javascript, css hoặc html nhỏ, mà không cần kết hợp nó lại thành một demo hoàn chỉnh.

Runkit

Không giống hai bạn ở trên, Runkit tập trung vào hỗ trợ Nodejs. Nếu hai bạn ở trên hỗ trợ chạy trong môi trường của trình duyệt, thì bạn này chạy trong Nodejs và chạy ở phía server của Runkit thay vì trong browser của bạn. Và chỉ hỗ trợ Javascript.

Theo như Runkit thì dịch vụ này để phục vụ để làm prototype, cho phép bạn viết những đoạn code demo giúp khách trải nghiệm ý tưởng, project hoặc api của bạn ngay trên trình duyệt của họ mà không cần phải cài đặt môi trường hay gõ bất kỳ một dòng code nào.

Chính vì vậy mà nó khác hẳn với hai bạn phía trên. Giờ đây highlight code chỉ là cơ bản, thay vào đó thì các chức năng chính sẽ là chạy code và tương tác, ví dụ như:

  1. Edit code trực tiếp trong embed.
  2. Run code và hiển thị kết quả.
  3. Require các node module.
  4. Hỗ trợ hiển thị dữ liệu, Xem ví dụ tại đây.

Runkit cũng hỗ trợ revision, bạn có thể tạo ra nhiều version và embed riêng từ cái, rất hữu dụng khi bạn viết bài, và cần phải thay đổi code qua từng mục, ở mỗi mục bạn sẽ tạo một version và embed nó. Nhờ đó bạn đỡ phải gõ lại code.

Điều mà codepen và JSFiddle không thể thay thế được Runkit đó là Nodejs. Hôm rồi mình có viết bài về cách scrape thông tin của app trên Play Store, code trong bài viết cần phải chạy bằng Nodejs, nên nếu không có Runkit thì mình chỉ có thể hiển thị code thôi. Nhưng đã không như vậy, xem đây nhé:

Bạn có thể sửa code trực tiếp và run lại.

Nếu bạn để ý thì thấy cách trình bày kêt quả khá đẹp. Và nếu code có lỗi thì sẽ có thông báo lỗi ở ngay phía dưới dòng bị lỗi.

Còn như vầy thì sao, hãy run thử để xem kết quả:

Codepen và JSFiddle đều cố định height, nên nếu code quá dài thì bạn sẽ phải scroll. Nhưng Runkit thì có thể thay đổi độ dài cho phù hợp với code:

Đánh giá

  1. Dễ đọc hay không?
    Font vừa phải, màu sắc khá dễ đọc. Kích thước thay đổi tùy độ dài của code.
  2. Dễ viết hay không?
    Chỉ có thể viết và edit ở site ngoài. Editor nhìn khá chuối.
  3. Đẹp không?
    Khá đẹp và hợp với medium, giống gist.
  4. Hỗ trợ tương tác tốt không?
    Tương tác tốt, có thể chỉnh sửa code và run Node và xem kết quả hoặc lỗi ngay trong trình duyệt.

Kết luận:

Nên dùng hiển thị code, demo về cần dùng Node, muốn demo có thể chạy được ngay.
Không nên dùng nếu muốn làm demo có HTML, CSS.

repl.it

Thoạt nhìn thì khá giống Runkit nhưng repl.it hỗ trợ nhiều ngôn ngữ hơn, và thay vì hướng tới prototype thì repl.it tập trung vào online IDE. Vì vậy hỗ trợ khá nhiều ngôn ngữ lập trình được hỗ trợ: Python, ruby, javascript, C#, Java, React Native, v.v.. và nhiều tính năng đặt trưng của IDE.

Nhưng cũng vì vậy mà nó không hỗ trợ hiển kết quả phong phú như runkit. Không được cái này thì mạnh cái khác, kèm theo editor là giao diện console, giả lập giống như console thật, bạn có thể code lên nó và giao tiếp với phía phía server.

Repl.it hỗ trợ bạn giống như một IDE online, cho phép tạo nhiều file, thư mục, upload file, và nếu bạn muốn, bạn có thể download project về máy.

Khả năng tùy biến khá cao, cho phép bạn thay đổi layout, font, theme, indent type, indent size và đặt biệt là thứ mà IDE luôn có: autocomplete và check lỗi code.

Và điều rất đặt biệt là nếu bạn đã login thì khi thay đổi code ở embed thì những thay đổi đó sẽ được lưu lại luôn. Nghĩa là nếu khi đọc lại bài viết và thấy code ngu ngu, bạn không cần phải vào repl.it để sửa, chỉ cần sửa trực tiếp khi đang đọc bài.

Khác với Runkit, repl.it hỗ trợ cả việc lập trình HTML, CSS, JS. Có nghĩa là có thể thay thế được codepen.

Đánh giá

  1. Dễ đọc hay không?
    Font khá nhỏ, tương phản kém. Kích thước cố định, phải scroll để đọc code.
  2. Dễ viết hay không?
    Rất dễ, có thể sửa vào lưu code ngay trong embed.
  3. Đẹp không?
    Dark theme thì ngầu như mà không hợp lắm với medium. Console lúc nào cũng được hiển thị và chiếm diện tích.
  4. Hỗ trợ tương tác tốt không?
    Tương tác rất tốt. có luôn một console kèm theo editor. Có thể xem nhiều file trong cùng một embed
  5. Hỗ trợ nhiều ngôn ngữ.

Kết luận:

Nên dùng Khi ngôn ngữ không phải là javascript, khi cần run javascript trong môi trường browser thay vì node.
Hoặc embed cả một project.

Không nên dùng khi chỉ cần hiển thị đoạn code ngắn, không cần thực thi hoặc khi muốn chú trọng vào code thay vì kết quả.

Carbon

— update ngày 27/3/2018

Hôm này mình mới biết thêm Carbon. Công cụ này thì khác những cái trên. Bạn không embed code dạng text, công cụ này sẽ generate ra một file ảnh, bạn chèn nó vào blog là xong.

Đánh giá

  1. Dễ đọc hay không?
    Rất đẹp và dễ đọc trên máy tính.
  2. Dễ viết hay không?
    Khá bất tiện, phải viết code, save image, và upload lên mới dùng được.
  3. Đẹp không?
    Đẹp, nhiều style cho bạn tùy chọn.
  4. Hỗ trợ tương tác tốt không?
    Không tương tác, chỉ là file ảnh, nhưng bù lại sẽ có thể đọc được trên kindle, pdf và điện thoại
  5. Hỗ trợ nhiều ngôn ngữ.

Lời kết

Mỗi một dịch vụ hướng tới một mục đích riêng của họ. Nhờ vậy mà ta có nhiều dịch vụ đa dạng để lựa chọn khi cần.

Nếu chỉ muốn hiển thị đoạn code ngắn thì có thể dùng code block hoặc gist.
Nếu code đơn giản trên nodejs và muốn người dùng có thể chạy trực tiếp và đẹp thì dùng Runkit.
Nếu code phức tạp, thậm chí là một project thì hãy dùng repl.it
Nếu code là một ngôn ngữ khác thì chắc chắn phải dùng repl.it
Và nếu bạn đang demo với HTML, CSS, Javascript thì dùng codepen hoặc JSFiddle.

Cảm ơn bạn đã đọc bài, nếu bạn thấy bài viết có chỗ chưa đúng hoặc bạn biết một dịch vụ nào khác, hãy chia sẻ ở phần comment.