Hai mã cột trong Markdown

Question

Tôi muốn viết một tài liệu giải thích tiêu chuẩn mã hóa với các ví dụ mã hóa tốt và xấu. Mỗi quy tắc có một số mô tả và một ví dụ.

Ví dụ ở đây là các quy tắc 1:

# Rule 1 
Description for rule 1. 

## Good 
```c 
int foo (void) 
{ 
    int i; 
} 
``` 

## Bad 
```c 
int foo (void) { 
    int i; 
} 
``` 

Từ mỗi quy tắc individal, tôi muốn tạo ra một PDF hoặc một trang HTML với một bảng toàn cầu của nội dung.

Làm cách nào để viết mã tương thích Markdown có thể biểu diễn các khối mã được căn chỉnh theo chiều ngang với màu cú pháp?

Như thế này:

Hoặc này:

  Good    Not Good 
.---------------------+--------------------. 
| int foo (void)  | int foo (void) { | 
| {     | int i;   | 
| int i;   | }     | 
| }     |     | 
'---------------------+--------------------' 

Tôi biết rằng tôi có thể thêm dữ liệu meta như các thẻ HTML vào một tài liệu Markdown. Vì vậy, tôi có thể có thể viết một cái gì đó như thế này:

<good> 
```c 
int foo (void) 
{ 
    int i; 
} 
``` 
</good> 
<bad> 
```c 
int foo (void) { 
    int i; 
} 
``` 
</bad> 

Và xử lý dữ liệu sau đó (tôi vẫn không biết làm thế nào)

markdown -> own-tags-processing -> LaTeX -> pdf 
markdown -> own-tags-processing -> HTML 

Có cách nào tốt hơn để ngang gắn kết hai khối mã theo chiều ngang?

Answer 1

Bạn không thể, ít nhất là không có Markdown thuần túy vì nó không có bất kỳ khái niệm cột nào. Như được giải thích trong số rules:

Ý tưởng cho Markdown là giúp bạn dễ đọc, viết và chỉnh sửa văn xuôi. HTML là định dạng xuất bản; Markdown là một định dạng văn bản. Do đó, cú pháp định dạng của Markdown chỉ giải quyết các vấn đề có thể được chuyển tải dưới dạng văn bản thuần túy.

Đối với bất kỳ đánh dấu nào không nằm trong cú pháp của Markdown, bạn chỉ cần sử dụng chính HTML.

Thực tế, cách tốt nhất là có mỗi khối mã được bao bọc trong một <div> với lớp thích hợp được gán cho mỗi div. Tuy nhiên, hầu hết các trình phân tích cú pháp Markdown không phân tích cú pháp Markdown bên trong một khối HTML thô. Do đó, bạn cũng có thể cần xác định khối mã trong HTML thô. Kiểm tra danh sách các tính năng của trình phân tích cú pháp của bạn để tìm hiểu. Trong trường hợp bạn không thể xác định CSS của riêng bạn để sử dụng riêng biệt với Đánh dấu (để tạo kiểu cho HTML), bạn cũng sẽ cần xác định kiểu nội tuyến trong HTML. This question bao gồm một mẫu đẹp về những gì có thể trông như thế nào. Chỉ cần thay thế các chú thích bằng các khối mã thích hợp. Nếu bạn phải xác định khối mã của bạn trong HTML liệu, họ sẽ trông như thế này:

<pre><code class="language-c">int foo (void) 
{ 
    int i; 
} 
</code></pre> 

Vì vậy, các tài liệu chính thức mà chắc chắn sẽ làm việc trong tất cả (nhất?) Parsers Markdown sẽ trông như thế này:

# Rule 1 
Description for rule 1. 

<div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;"> 
    <div style="display: inline-block;"> 
     <h2>Good</h2> 
     <pre><code class="language-c">int foo (void) 
{ 
    int i; 
} 
</code></pre> 
    </div> 
    <div style="display: inline-block;"> 
     <h2>Bad</h2> 
     <pre><code class="language-c">int foo (void) { 
    int i; 
} 
</code></pre> 
    </div> 
</div> 

Lưu ý rằng sử dụng một trong nhiều cách khác nhau để xác định cột trong CSS. Các phương pháp khác nhau có thể có hoặc không hoạt động trong các trình duyệt khác nhau. YMMV.