Hướng dẫn sử dụng Markdown tại Ngayngay

docs
docs
· 6 phút đọc

Khi sử dụng Chế độ Nhà phát triển, Ngayngay cung cấp cho bạn một trình biên tập gọi là Markdown Editor. Quan điểm của đội ngũ phát triển là mong muốn bạn có thể tự do thao tác đến mức tối đa mà vẫn đảm bảo tiêu chuẩn chung. Vì vậy hãy tin rằng là bạn có thể làm được rất nhiều thứ trên trình biên tập này.

Tôi giả sử bạn đã quen thuộc với ngôn ngữ định dạng Markdown, nên các cú pháp cơ bản tôi sẽ không đề cập.

Nếu bạn quên, hãy đọc lại nó tại đây: 

Một điểm lưu ý quan trọng, Ngayngay sử dụng một phiền bản điều chỉnh của Markdown được đề xuất bởi Github được gọi là GitHub Flavored Markdown. Ưu điểm chính của phiên bản này là việc tích hợp mã code vào rất dễ dàng và linh hoạt.

Tôi sẽ làm một vài ví dụ trước, rồi sau đó nêu là một số lỗi phổ biến mà bạn có thể mắc phải khi biên tập bài viết.

Syntax highlighting

from itertools import groupby

things = [("animal", "bear"), ("animal", "duck"), ("plant", "cactus"), ("vehicle", "speed boat"), ("vehicle", "school bus")]

for key, group in groupby(things, lambda x: x[0]):
    for thing in group:
        print "A %s is a %s." % (thing[1], key)
    print " "

Trên đây là một đoạn mã python 2, bạn cần sử dụng cấu trúc đóng mở khối bằng ```. Tôi thêm py2 để hệ thống nhận biết ngôn ngữ đưa ra kết quả mỹ quan nhất.

 ```py2
 # your code here
 ```

Ngoài ra, trên một dòng bạn cũng có thể chỉ định ngôn ngữ cho một đoạn code inline const result = words.filter(word => word.length > 6); bằng cách #!js const result = words.filter(word => word.length > 6);

Công thức toán học, hóa học

Ngayngay hỗ trợ hiển thị tốt định dạng Katex. Bạn có thể tìm hiểu và thực hành tại đây: https://tiddlywiki.com/plugins/tiddlywiki/katex/

Công thức: f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi

Kết quả:

\[ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi \]
Hoặc phức tạp hơn:
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

Kết quả:

\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \]

Một công thức có thể hiển thị inline \(p(x|y) = \frac{p(y|x)p(x)}{p(y)}\) bằng cách gõ `#!math p(x|y) = frac{p(y|x)p(x)}{p(y)}`.

Tasklist

Một danh sách các tác vụ cần làm được viết như sau:

  • item 1
    • item A
    • item B more text
      • item a
      • item b
      • item c
    • item C
  • item 2
  • item 3

- [X] item 1
    * [X] item A
    * [ ] item B
        more text
        + [x] item a
        + [ ] item b
        + [x] item c
    * [X] item C
- [ ] item 2
- [ ] item 3

Một số cú pháp khác

Hiển thị tổ hợp phím

Ctrl+Alt+My Special Key

Cmd+Alt+Ü

++ctrl+alt+"My Special Key"++

++cmd+alt+"Ü"++

Highlight văn bản

Có thể dùng thẻ <mark></mark> của HTML hoặc cấu trúc ==text==.

Emoji

😄 ❤️ 👍

:smile: :heart: :thumbsup:

Detail - Summary

Đây là một thẻ chuẩn của HTML5, rất nhiều trình duyệt hiện đại hỗ trợ. Mục đích chính của bộ đôi này là tạo nội dung gọn gàng hơn, khi cần thì người đọc có thể mở ra để xem thêm.

JavaScript

JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.

Python

Python is an interpreted, high-level, general-purpose programming language.

Boostrap

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

React

A JavaScript library for building user interfaces

PostgreSQL

The World's Most Advanced Open Source Relational Database

??? "JavaScript"
    JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.

??? multiple success custom-class "Python"
    Here's some content.

??? danger "Boostrap"
    Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

??? example "React"
    A JavaScript library for building user interfaces

??? important "PostgreSQL"
    The World's Most Advanced Open Source Relational Database

Tab

Bạn có thể dùng cách trình bày tab như tôi đã làm ở trong bài này với cách sau:

=== "Tab 1"
    Markdown **content**.

    Multiple paragraphs.

=== "Tab 2"
    More Markdown **content**.

    - list item a
    - list item b

Kết quả:

Markdown content.

Multiple paragraphs.

More Markdown content.

  • list item a
  • list item b

Card

Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.
<div class="card">
  <div class="card-header">Title</div>
  <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.
  </div>
</div>

Tổng kết

Về cơ bản, Markdown sẽ chấp nhận tất cả các thẻ HTML cơ bản. Nên việc bạn thông thạo HTML cũng là một lợi thế để tạo ra một văn bản đẹp mắt.

Markdown rất coi trọng các dấu cách, bạn hãy lưu ý không để thừa các ký tự Space.

Khi muốn giãn cách dòng thì bạn cần xuống dòng 2 lần. Nếu để dính các dòng với nhau, nhiều cú pháp sẽ không thể hiện đúng.

Ngayngay
Cộng đồng của những người yêu thích viết lách, nơi chia sẻ kiến thức học thuật, quan điểm cá nhân về mọi vấn đề của cuộc sống.