Định dạng bài viết

Hầu hết các tính năng này chỉ có thể được sử dụng trong chế độ 'Chế độ xem HTML', bạn cũng không thể chuyển sang chế độ 'Chế độ xem Soạn thư' khi đang sử dụng một số tính năng này.

Trong chế độ xem của trình chỉnh sửa bài đăng, hãy nhấp vào biểu tượngở dưới cùng bên phải của tiêu đề.
2 tùy chọn sẽ xuất hiện: Chế độ xem HTML và chế độ xem Soạn thư.
Lựa chọn ' Chế độ xem HTML'.

Mẹo:

Sử dụng thẻ <p>Your_paragraph_here</p> để thêm đoạn văn vào bài viết.
Và thêm  (Jump Breaks) sau 1-2 dòng đầu đoạn văn.

Hình ảnh

Tất cả hình ảnh đều có thể nhấp vào và hiển thị trong Lightbox.

A. Chú thích dạng mã

Thẻ figure chuẩn với figcaption. Ngay cả khi không có thẻ <a href>, hình ảnh vẫn được hiển thị trong Lightbox.

Dạng viết:

<figure>
  <img alt='Title' src='image_url' title='Title'>
  <figcaption>Additional_caption_text</figcaption>
</figure>

B. Thư viện ảnh

Additional caption text

Dạng viết:

<div class='gallery carousel'>
  <div class='carousel-inner'>
    <img alt='Title_1' src='image_url_1' title='Title_1'/>
    <img alt='Title_2' src='image_url_2' title='Title_2'/>
    <img alt='Title_3' src='image_url_3' title='Title_3'/>
    <!-- ... and so on until infinity ... -->
  </div>
  <div class='caption'>Additional_caption_text</div>
</div>

Nếu bạn không muốn sử dụng phụ đề, hãy xóa phần này:

<div class='caption'>Additional_caption_text</div>

C. Thư viện ảnh (Vuốt)

Nhiều hình ảnh có phong cách vuốt như Instagram Stories hoặc video ngắn trên YouTube. Rất giống với phong cách thư viện ảnh của Instagram. Nhẹ hơn vòng đu quay.

Additional caption text

Hoặc:

Additional caption text

Dạng viết:

<div class='gallery swipe'>
  <div class='swipe-inner'>
    <img alt='Title_1' src='image_url_1' title='Title_1'/>
    <img alt='Title_2' src='image_url_2' title='Title_2'/>
    <img alt='Title_3' src='image_url_3' title='Title_3'/>
    <!-- ... and so on until infinity ... -->
  </div>
  <div class='caption'>Additional_caption_text</div>
</div>

Nếu sử dụng hình ảnh dọc/chân dung, hãy thêm lớp chân dung vào mã. Ví dụ:

<div class='gallery swipe portrait'>
  <div class='swipe-inner'>
    <img alt='Title_1' src='image_url_1' title='Title_1'/>
    <img alt='Title_2' src='image_url_2' title='Title_2'/>
    <img alt='Title_3' src='image_url_3' title='Title_3'/>
    <!-- ... and so on until infinity ... -->
  </div>
  <div class='caption'>Additional_caption_text</div>
</div>

Nếu bạn không muốn sử dụng phụ đề, hãy xóa phần này:

<div class='caption'>Additional_caption_text</div>

D. Thư viện ảnh (Lưới)

Hình ảnh sẽ được hiển thị dưới dạng lưới. Nếu có nhiều hơn 4 hình ảnh, chức năng Show All (Mở rộng) sẽ được tự động thêm vào. Tương tự như phong cách thư viện ảnh của Facebook.

Additional caption text

<div class='gallery grid'>
  <div class='grid-inner'>
    <img alt='Title_1' src='image_url_1' title='Title_1'/>
    <img alt='Title_2' src='image_url_2' title='Title_2'/>
    <img alt='Title_3' src='image_url_3' title='Title_3'/>
    <!-- ... and so on until infinity ... -->
  </div>
  <div class='caption'>Additional_caption_text</div>
</div>

Nếu bạn không muốn sử dụng phụ đề, hãy xóa phần này:

<div class='caption'>Additional_caption_text</div>

Dấu ngắt bài

Có thể sử dụng ba dấu chấm để phân tách các đoạn văn và tạo khoảng cách như thế này:

Dạng viết.

<hr/>

Đoạn có DropCap

Là chữ in hoa cỡ lớn dùng làm thành phần trang trí ở đầu đoạn văn, kích thước thường từ hai dòng trở lên. Nắp thả sẽ thay đổi kích thước của chữ cái đầu tiên để nó giảm một hoặc nhiều dòng xuống. Nhiều loại phương tiện in ấn sử dụng nắp thả như sách, tạp chí, báo, v.v. vì chúng có thể tăng thêm sự hấp dẫn cho thị giác.

Dạng viết.

<p><span class='drop'>T</span>ext_paragraph</p>

Trích dẫn đoạn văn

Hầu hết mọi người đánh giá quá cao những gì họ có thể làm trong một năm và đánh giá quá thấp những gì họ có thể làm trong mười năm.

Hoặc:

Hầu hết mọi người đánh giá quá cao những gì họ có thể làm trong một năm và đánh giá quá thấp những gì họ có thể làm trong mười năm.
Bill Gates

Dạng viết.

<blockquote>Text_paragraph</blockquote>

Phong cách thay thế:

<blockquote>Text_paragraph
  <footer>Author</footer>
</blockquote>

Ghi chú khối

Box default

Box green

Box blue

Box red

Box yellow

Cách sử dụng: Bạn có thể gặp phải vấn đề này nếu có cảnh báo.

<div class='box'>Write_text_here</div>

<div class='box green'>Write_text_here</div>

<div class='box blue'>Write_text_here</div>

<div class='box red'>Write_text_here</div>

<div class='box yellow'>Write_text_here</div>

Định dạng văn bản

Các phần tử định dạng được thiết kế để hiển thị các kiểu đặc biệt của văn bản:

Dạng viết.

Thẻ	Mô tả
`<b>`	Định nghĩa văn bản in đậm
`<em>`	Định nghĩa văn bản được nhấn mạnh
`<i>`	Định nghĩa văn bản in nghiêng
`<small>`	Định nghĩa cỡ chữ nhỏ hơn
`<strong>`	Định nghĩa văn bản quan trọng
`<sub>`	_{Định nghĩa chỉ số dưới}
`<sup>`	^{Định nghĩa chỉ số trên}
`<ins>`	Định nghĩa văn bản được chèn thêm
`<del>`	~~Định nghĩa văn bản bị loại bỏ~~
`<mark>`	Định nghĩa văn bản được đánh dấu/nhấn mạnh

Danh sách có thứ tự

“Nếu yêu lần nữa thất bại anh sẽ là quá khứ mới của em, nếu thành công chúng ta sẽ là tương lai của nhau”
“Đừng tìm người chín chắn để yêu, cứ yêu đi rồi nó sẽ chín chắn”
“Thế giới rất đông người, đã gặp được em, nếu có thể hãy ở lại nhé”
“Cái mền sạch nhất cũng có bụi”

Dạng viết.

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

Danh sách không có thứ tự

“Nếu yêu lần nữa thất bại anh sẽ là quá khứ mới của em, nếu thành công chúng ta sẽ là tương lai của nhau”
“Đừng tìm người chín chắn để yêu, cứ yêu đi rồi nó sẽ chín chắn”
“Thế giới rất đông người, đã gặp được em, nếu có thể hãy ở lại nhé”
“Cái mền sạch nhất cũng có bụi”

Dạng viết.

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Bảng

Để tạo một bảng rộng có thể xoay (không phẳng), hãy bao quanh bảng bằng thẻ sau.

Tên	Chức vụ	Văn phòng	Tuổi	Ngày bắt đầu	Lương
Tiger Nixon	Kiến trúc hệ thống	Edinburgh	61	25/04/2011	$320,800
Mùa đông Garrett	Kế toán viên	Tokyo	63	25/07/2011	$170,750

Dạng viết.

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>Title_1</th>
        <th>Title_2</th>
        <th>Title_3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Entry_1</td>
        <td>Entry_2</td>
        <td>Entry_3</td>
      </tr>
    </tbody>
  </table>
</div>

Thu nhỏ tự động

Tên	Chức vụ	Văn phòng	Tuổi	Ngày bắt đầu	Lương
Tiger Nixon	Kiến trúc hệ thống	Edinburgh	61	25/04/2011	$320,800
Mùa đông Garrett	Kế toán viên	Tokyo	63	25/07/2011	$170,750

Dạng viết.

<table>
  <thead>
    <tr>
      <th>Title_1</th>
      <th>Title_2</th>
      <th>Title_3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Entry_1</td>
      <td>Entry_2</td> 
      <td>Entry_3</td>
    </tr>
  </tbody>
</table>

Nhiều Tab

Tạo nhiều tab với nội dung không giới hạn. Bạn có thể thêm bao nhiêu tab tùy thích vì tiêu đề sẽ xoay được (không làm hỏng màn hình).

First Tab
Second Tab
Third Tab

Content of the first tab (1st).

Content of the second tab (2nd).

Content of the third tab (3rd).

Dạng viết.

<div class='tabs'>
  <ul>
    <li class='current'>First Tab</li>
    <li>Second Tab</li>
    <li>Third Tab</li>
    <!-- etc -->
  </ul>
  <div class='content visible'>
    Content of the first tab (1st)
  </div>
  <div class='content'>
    Content of the second tab (2nd)
  </div>
  <div class='content'>
    Content of the third tab (3rd)
  </div>
  <!-- etc -->
</div>

Ẩn/hiện nội dung

Được sử dụng để tạo các widget tương tác có thể được người dùng ẩn hoặc hiển thị theo yêu cầu.

Ẩn/hiện nội dung

Mọi thứ bạn muốn đều có thể là của bạn: Kiểu công việc bạn muốn, mối quan hệ bạn cần, những điều làm bạn hạnh phúc. Nhưng trước tiên bạn phải biết bản thân mình muốn điều gì?

Dạng viết.

<details class='accordion'>
  <summary>Title</summary>
  Write_text_here
</details>

Nếu bạn muốn mở theo mặc định, hãy thêm đoạn mã sau:

Hiện/ẩn nội dung

Dạng viết.

<details class='accordion' open='open';>
  <summary>Title</summary>
  Write_text_here
</details>

Tiết lộ nội dung

Hiển thị/ẩn nội dung bằng sự kiện nhấp chuột để kích hoạt.

Hiện nội dung

Dạng viết.

<details class='spoiler'>
  <summary>Spoiler_title</summary>
  Your_text_is_here
</details>

Công cụ đánh dấu cú pháp

Tiêu chuẩn

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

Dạng viết.

<pre class='html'><code>Parsed_code_goes_here</code></pre>

Bạn có thể thay đổi tên lớp tùy theo loại mã được viết. Các lớp học có sẵn bao gồm: html, css, js.

Ví dụ:

<pre class='css'><code>Parsed_code_goes_here</code></pre>
<pre class='js'><code>Parsed_code_goes_here</code></pre>

Bạn cũng có thể thực hiện điều này mà không cần đến lớp. Ví dụ:

<pre><code>Parsed_code_goes_here</code></pre>

Cú pháp nhiều tab

Tab 1
Tab 2
Tab 3

Tab 1 content

Tab 2 content

Tab 3 content

Dạng viết.

<div class='tabs syntax'>
  <ul>
    <li class='current'>Tab_1</li>
    <li>Tab_2</li>
    <li>Tab_3</li>
  </ul>
  <div class='content visible'>
    <pre class='html'><code>Tab_1_content</code></pre>
  </div>
  <div class='content'>
    <pre class='css'><code>Tab_2_content</code></pre>
  </div>
  <div class='content'>
    <pre class='js'><code>Tab_3_content</code></pre> 
  </div>
</div>

Button

A. Liên kết button

file_name.zip 200kb

Dạng viết.

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' href='#' aria-label='Download'>
    <svg class='line' viewBox='0 0 24 24'><path d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z'></path><path d='M12 8.5V14.5'></path><path d='M9 12.5L12 15.5L15 12.5'></path></svg>
  </a>
</div>

B. Kiểu mặc định:

Dạng viết.

<a href='#' title='Title'><button>Button</button></a>
<a href='#' title='Title'><button class='download'>Download</button></a>
<a href='#' title='Title'><button class='demo'>Demo</button></a>

Dạng viết.

<a href='#' title='Title'><button class='round'>Button</button></a>
<a href='#' title='Title'><button class='round download'>Download</button></a>
<a href='#' title='Title'><button class='round demo'>Demo</button></a>

C. Không nền:

Dạng viết.

<a href='#' title='Title'><button class='outline'>Button</button></a>
<a href='#' title='Title'><button class='outline download'>Download</button></a>
<a href='#' title='Title'><button class='outline demo'>Demo</button></a>

Dạng viết.

<a href='#' title='Title'><button class='outline round'>Button</button></a>
<a href='#' title='Title'><button class='outline round download'>Download</button></a>
<a href='#' title='Title'><button class='outline round demo'>Demo</button></a>

Lazy Youtube

Video có thể được thiết lập ngay sau khi nhấp vào các hoạt động này.

Dạng viết:

<div class='youtubelazy' data-embed='J8Jd7YFg538'></div>

Thay thế Youtube_videoID bằng ID Youtube ưa thích của bạn.
ID video có thể được tìm thấy trên url Youtube, ví dụ youtube.com/watch?v=J8Jd7YFg538.

Các phần tử ở giữa

Sẽ tự động căn giữa văn bản hoặc thành phần trong đoạn văn (căn giữa).

Dạng viết:

<div class='center'>
  Text_paragraph
</div>

Gia Huy

Định dạng bài viết

Hình ảnh

A. Chú thích dạng mã

B. Thư viện ảnh

C. Thư viện ảnh (Vuốt)

D. Thư viện ảnh (Lưới)

Dấu ngắt bài

Đoạn có DropCap

Trích dẫn đoạn văn

Ghi chú khối

Định dạng văn bản

Danh sách có thứ tự

Danh sách không có thứ tự

Bảng

Nhiều Tab

Ẩn/hiện nội dung

Tiết lộ nội dung

Công cụ đánh dấu cú pháp

Cú pháp nhiều tab

Button

A. Liên kết button

B. Kiểu mặc định:

C. Không nền:

Lazy Youtube

Các phần tử ở giữa

1 nhận xét

Định dạng bài viết

Hình ảnh

A. Chú thích dạng mã

B. Thư viện ảnh

C. Thư viện ảnh (Vuốt)

D. Thư viện ảnh (Lưới)

Dấu ngắt bài

Đoạn có DropCap

Trích dẫn đoạn văn

Ghi chú khối

Định dạng văn bản

Danh sách có thứ tự

Danh sách không có thứ tự

Bảng

Nhiều Tab

Ẩn/hiện nội dung

Tiết lộ nội dung

Công cụ đánh dấu cú pháp

Cú pháp nhiều tab

Button

A. Liên kết button

B. Kiểu mặc định:

C. Không nền:

Lazy Youtube

Các phần tử ở giữa

Related Posts

1 nhận xét