Tôi có thể định nghĩa tên lớp trên đoạn văn bằng Markdown không?

Tôi có thể định nghĩa tên lớp trên đoạn văn bằng Markdown không? Nếu vậy thì thế nào?

Dupe: Làm cách nào để đặt thuộc tính lớp HTML trong Markdown?

Tự nhiên? Không nhưng...

Không, cú pháp của Markdown không thể. Bạn có thể đặt giá trị ID với Markdown Extra thông qua.

Bạn có thể sử dụng HTML thông thường nếu bạn thích và thêm thuộc tính markdown="1"để tiếp tục chuyển đổi đánh dấu trong phần tử HTML. Điều này đòi hỏi Markdown Extra mặc dù.

<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>

Giải pháp có thể: (Chưa được kiểm tra và dự định <blockquote>)

Tôi tìm thấy sau đây trực tuyến:

Chức năng

function _DoBlockQuotes_callback($matches) {

    ...cut...

    //add id and class details...
    $id = $class = '';
    if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
        foreach ($matches[1] as $match) {
            if($match[0]=='#') $type = 'id';
            else $type = 'class';
            ${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
        }
        foreach ($matches[0] as $match) {
            $bq = str_replace($match,'',$bq);
        }
    }

    return _HashBlock(
        "<blockquote{$id}{$class}>\n$bq\n</blockquote>"
    ) . "\n\n";
}

Đánh dấu

>{.className}{#id}This is the blockquote

Kết quả

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>

HTML thô thực sự hoàn toàn hợp lệ trong markdown. Ví dụ:

Normal *markdown* paragraph.

<p class="myclass">This paragraph has a class "myclass"</p>

Chỉ cần đảm bảo rằng HTML không nằm trong khối mã.

Nếu môi trường của bạn là JavaScript, hãy sử dụng markdown-it cùng với plugin markdown-it-attrs :

const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);

const src = 'paragraph {.className #id and=attributes}';

// render
let res = md.render(src);
console.log(res);

Đầu ra

<p class="className" id="id" and="attributes">paragraph</p>

jsfiddle

Lưu ý: Lưu ý về khía cạnh bảo mật khi cho phép các thuộc tính trong phần đánh dấu của bạn!

Từ chối trách nhiệm, tôi là tác giả của markdown-it-attrs.

Markdown nên có khả năng này, nhưng nó không. Thay vào đó, bạn bị mắc kẹt với các supersets Markdown dành riêng cho ngôn ngữ:

PHP: Markdown Extra
Ruby: Kramdown , Maruku

Nhưng nếu bạn cần tuân theo cú pháp Markdown thực sự, bạn sẽ bị mắc kẹt với việc chèn HTML thô, điều này ít lý tưởng hơn.

Nếu hương vị markdown của bạn là kramdown, thì bạn có thể đặt lớp css như thế này:

{:.nameofclass}
paragraph is here

Sau đó, trong tệp css của bạn, bạn đặt css như thế này:

.nameofclass{
   color: #000;
  }

Đây là một ví dụ hoạt động cho kramdown theo câu trả lời của @ Yarin.

A simple paragraph with a class attribute.
{:.yourClass}

Tham khảo: https://kramdown.gettalong.org/syntax.html#inline-attribution-lists

Như đã đề cập ở trên markdown chính nó để bạn treo trên này. Tuy nhiên, tùy thuộc vào việc thực hiện, có một số cách giải quyết:

Ít nhất một phiên bản MD được coi <div>là thẻ cấp khối nhưng <DIV>chỉ là văn bản. Tất cả các broswers tuy nhiên không nhạy cảm trường hợp. Điều này cho phép bạn giữ sự đơn giản cú pháp của MD, với chi phí thêm thẻ div div.

Vì vậy, sau đây là một cách giải quyết:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Nhược điểm của điều này là mã đầu ra có <p>các thẻ bao quanh các <div>dòng (cả hai, thứ nhất vì nó không phải và thứ hai vì nó không khớp. Không có trình duyệt nào ầm ĩ về điều này mà tôi đã tìm thấy, nhưng mã đã thắng ' t xác nhận. MD có xu hướng đặt trong <p>các thẻ dự phòng nào.

Một số phiên bản của markdown thực hiện quy ước <tag markdown="1">trong trường hợp MD sẽ thực hiện xử lý bình thường bên trong thẻ. Ví dụ trên trở thành:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Phiên bản hiện tại của MultiMarkdown của Fletcher cho phép các thuộc tính theo liên kết nếu sử dụng các liên kết được tham chiếu.

Trong markdown mỏng sử dụng này:

markdown:
  {:.cool-heading}
  #Some Title

Dịch sang:

<h1 class="cool-heading">Some Title</h1>

Cũng cần đề cập rằng <span>các thẻ cho phép bên trong chúng - các mục ở cấp độ khối phủ định MD bên trong chúng trừ khi bạn định cấu hình chúng không làm như vậy, nhưng các kiểu trong dòng thực sự cho phép MD bên trong chúng. Vì vậy, tôi thường làm gì đó giống như ...

This is a superfluous paragraph thing.

<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>

And thus with that I conclude.

Tôi không chắc chắn 100% nếu điều này là phổ quát nhưng dường như là trường hợp trong tất cả các trình soạn thảo MD tôi đã sử dụng.

Nếu bạn chỉ cần một bộ chọn cho mục đích Javascript (như tôi đã làm), bạn có thể chỉ muốn sử dụng một hrefthuộc tính thay vì classhoặc id:

Chỉ cần làm điều này:

<a href="#foo">Link</a>

Markdown sẽ không bỏ qua hoặc xóa hrefthuộc tính giống như với các lớp và id.

Vì vậy, trong Javascript hoặc jQuery của bạn, bạn có thể thực hiện:

$('a[href$="foo"]').click(function(event) {

    ... do your thing ...

    event.preventDefault();
});

Ít nhất thì nó hoạt động trong phiên bản Markdown của tôi ...