148

Markdownを使用して段落にクラス名を定義できますか？もしそうなら、どのように？

4

10 に答える 10

83

Dupe：MarkdownでHTMLクラス属性を設定するにはどうすればよいですか？

ネイティブ？いいえ。でも...

いいえ、Markdownの構文はできません。MarkdownExtraからID値を設定できます。

必要に応じて通常のHTMLを使用し、属性を追加しmarkdown="1"てHTML要素内でマークダウン変換を続行できます。ただし、これにはMarkdownExtraが必要です。

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

考えられる解決策:(テストされておらず、対象とされてい<blockquote>ます）

私は次のものをオンラインで見つけました：

働き

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";
}

マークダウン

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

結果

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>
于 2009-06-29T15:32:18.057 に答える
82

生のHTMLは実際にはマークダウンで完全に有効です。例えば：

Normal *markdown* paragraph.

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

HTMLがコードブロック内にないことを確認してください。

于 2009-06-29T15:30:41.367 に答える
19

環境がJavaScriptの場合は、プラグインのmarkdown-it-attrsと一緒にmarkdown-itを使用してください。

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);

出力

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

jsfiddle

注：マークダウンで属性を許可する場合は、セキュリティの側面に注意してください。

免責事項、私はmarkdown-it-attrsの作者です。

于 2016-08-29T20:51:09.363 に答える
10

マークダウンのフレーバーがkramdownの場合、次のようにcssクラスを設定できます。

{:.nameofclass}
paragraph is here

次に、cssファイルで、次のようにcssを設定します。

.nameofclass{
   color: #000;
  }
于 2018-04-06T16:41:51.797 に答える
8

Markdownにはこの機能が必要ですが、そうではありません。代わりに、言語固有のMarkdownスーパーセットで立ち往生しています。

PHP： Markdown Extra
Ruby： Kramdown、Maruku

しかし、真のMarkdown構文に従う必要がある場合は、生のHTMLを挿入することに固執します。これはあまり理想的ではありません。

于 2013-12-02T16:52:14.063 に答える
6

@Yarinの回答に続くkramdownの実例を次に示します。

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

参照：https ：//kramdown.gettalong.org/syntax.html#inline-attribute-lists

于 2017-10-08T10:02:20.340 に答える
3

上で述べたように、マークダウン自体はあなたをこれにぶら下げたままにします。ただし、実装に応じて、いくつかの回避策があります。

MDの少なくとも1つのバージョンは<div>、ブロックレベルのタグと見なされますが、<DIV>単なるテキストです。ただし、すべてのブラウザは大文字と小文字を区別しません。これにより、divコンテナタグを追加する代わりに、MDの構文を単純に保つことができます。

したがって、以下は回避策です。

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

これの欠点は、出力コードに行<p>をラップするタグがあること<div>です（最初は一致しないため、2番目は一致しないためです。私が見つけたブラウザはこれについて大騒ぎしませんが、コードはt検証。MDは<p>とにかくスペアタグを入れる傾向があります。

マークダウンのいくつかのバージョンは、この規則<tag markdown="1">を実装しています。この場合、MDはタグ内で通常の処理を行います。上記の例は次のようになります。

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

FletcherのMultiMarkdownの現在のバージョンでは、参照されたリンクを使用している場合、属性がリンクをたどることができます。

于 2014-01-25T22:23:29.477 に答える
2

スリムな値下げでは、これを使用します：

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

翻訳：

<h1 class="cool-heading">Some Title</h1>
于 2018-07-17T12:10:51.763 に答える
1

また、<span>タグはタグ内で許可されます。ブロックレベルのアイテムは、設定しない限り、タグ内でMDをネイティブに無効にしますが、インラインスタイルでは、タグ内でMDをネイティブに許可します。そういうものとして、私はしばしば似たようなことをします...

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.

これが普遍的であるかどうかは100％わかりませんが、私が使用したすべてのMDエディターに当てはまるようです。

于 2019-10-17T23:23:35.453 に答える
0

（私が行ったように）Javascriptの目的でセレクターが必要な場合は、または：hrefの代わりに属性を使用することをお勧めします。classid

これを行うだけです：

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

hrefMarkdownは、クラスやIDの場合のように、属性を無視したり削除したりしません。

したがって、JavascriptまたはjQueryでは、次のことができます。

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

    ... do your thing ...

    event.preventDefault();
});

少なくともこれは私のバージョンのMarkdownで機能します...

于 2018-06-07T18:12:56.620 に答える