For me only

Bài đăng này chỉ dành cho tôi để viết bài và nó sẽ được cập nhật thường xuyên mà không cần thông báo! Các bạn vui lòng đọc các bài khác nhé!

Chuẩn chung cho bài viết

Nội dung bài viết được soạn trên file markdown (.md). Nếu bạn chưa hiểu về nó hãy xem Markdown Guide - Markdown Shortcuts - chuẩn Markdown
  • date : Hiển thị ngày cập nhật, dạng YYYY-MM-DD.
  • dateModified : Hiển thị ngày sửa đổi, dạng YYYY-MM-DD.
  • title : 'Tiêu đề của bài viết'.
  • subtitle : 'Đoạn mô tả ngắn cho bài viết hoặc trang'.
  • template: Sử dụng post hoặc page.
  • thumbnail : Đường dẫn chứa ảnh.
  • slug : url của bài viết.
  • categories : Bài viết này thuộc chủ đề gì? Lưu ý chỉ nên có 1 chủ đề duy nhất. Xem danh sách các chủ đề đã sử dụng ở mục categories.
  • tags : Các tag liên quan đến bài viết, bạn xem thêm các nhãn đã được sử dụng ở mục tags. Nếu nhiều tag thì bạn viết theo cấu trúc ["tag1","tag2",...].
  • draft : true (Bài viết ở chế độ không công khai)
  • toc : true (Nếu bạn muốn hiển thị Table of Content. chỉ áp dụng cho bài viết)
  • comment : true (Nếu bạn muốn bật chức năng bình luận cho bài viết)

Chèn các câu hỏi

  • Sử dụng <h2 class="question">Câu hỏi</h2>

Phông chữ & văn bản

  • Ký hiệu trùng với Markdown: \*text* (thêm dấu \ trước những kí hiệu đó)
  • Sử dụng các class:

    • Căn chỉnh .text-right .text-center .text-justify .vertical-center .flex
    • Display .block .inline-block .inline
    • Trạng thái hiển thị .show .hide
    • Màu sắc văn bản .green .red .pink .blue .yellow
    • Thông báo <p class="alert alert-warning"> <p class="alert alert-success">
    • Ghi chú note
  • Văn bản được đánh dấu: <mark>texts</mark>
  • Bàn phím Ctrl + A <kbd>Ctrl</kbd> + <kbd>A</kbd>
  • Huy hiệu : <new />
  • Huy hiệu : <update />

Chèn các thành phần

Hộp thông báo của Bootstrap

<div class="alert alert-warning" role="alert" markdown="1">
alert warning
</div>
alert warning
<div class="alert alert-success" role="alert" markdown="1">
alert success
</div>
alert success
<div class="alert alert-primary" role="alert" markdown="1">
alert primary
</div>
alert primary

Hộp tự định nghĩa

Tiêu đề
Nội dung
<div class="def-box" markdown="1" id="dn1">
  <div class="box-title" markdown="1">
    Tiêu đề
  </div>
  <div class="box-content" markdown="1">
    Nội dung
  </div>
</div>
Tiêu đề Nội dung
<fieldset class="field-set">
  <legend class="leg-title">Tiêu đề</legend>
  <p class="tomtat">Nội dung...</p>
</fieldset>

Sử dụng Emoji

  • Danh sách các biểu tượng cảm xúc ở đây
  • Để hiển thị con gà emoji-chicken bản chỉ cần gõ :chicken:

Grid System

<div class="flex-row">
	<div class="flex-small">1</div>
	<div class="flex-small">2</div>
</div>
<div class="flex-row">
	<div class="flex-large">3</div>
	<div class="flex-large">4</div>
</div>
1
2
3
4
<div class="row">
  <div class="col-12">12</div>
</div>

<div class="row">
  <div class="col-3">3</div>
  <div class="col-9">9</div>
</div>

<div class="row">
  <div class="col-6">6</div>
  <div class="col-6">6</div>
</div>

<div class="row">
  <div class="col">auto</div>
  <div class="col">auto</div>
  <div class="col">auto</div>
</div>

<div class="row">
  <div class="col">auto</div>
  <div class="col">auto</div>
  <div class="col">auto</div>
  <div class="col">auto</div>
</div>
12
3
9
6
6
auto
auto
auto
auto
auto
auto
auto

Các bước (step by step)

<div  class="pnc-step">

  <div class="step">
    <div class="step-number"></div>
    <div class="step-content" markdown="1">
      Content of step 1.
    </div>
  </div>

  <div class="step">
    <div class="step-number"></div>
    <div class="step-content" markdown="1">
      Content of step 2.
    </div>
  </div>

</div>
Nội dung của bước 1.
Nội dung của bước 2.

Hình bên và nội dung

<div class="columns-2" markdown="1">
Texts

![alt](/link)
</div>

Ẩn-Hiện nội dung

Xem trước: Toggle Show Hide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatem cum provident aperiam ad deleniti maiores debitis, tempore quis voluptate adipisci dignissimos. Atque cumque voluptatibus sit architecto tenetur, perferendis aperiam.

<a href="#" onclick="$('.visibility').visibilityToggle(); return false;">Toggle</a>
<a href="#" onclick="$('.visibility').visibilityShow(); return false;">Show</a>
<a href="#" onclick="$('.visibility').visibilityHide(); return false;">Hide</a>

<p class="visibility">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatem cum provident aperiam ad deleniti maiores debitis, tempore quis voluptate adipisci dignissimos. Atque cumque voluptatibus sit architecto tenetur, perferendis aperiam.
</p>

Syntax Highlighter

Xem thêm tại prismjs.com

Sử dụng: <div class="filename">tiêu đề</div>

Kết quả:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Title</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div>...</div>
  </body>
</html>

~~~terminal

Nội dung...

Sử dụng MathJax

  • Tài liệu tham khảo.
  • Ví dụ để hiển thị $ax^{2} + bx + c = 0$ sử dụng:

    $$
    ax^{2} + bx + c = 0
    $$