Markdownを使用して段落にクラス名を定義できますか?


139

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


54
「Markdownを使用して段落にクラス名を定義できますか?」というより正確な方法を知りません。タイトルを読むのを忘れましたか?
ライアンフローレンス

[バイアス]もしあなたがたまたまNodeユーザーなら、Rhoをチェックしてください。Markdownとの完全な互換性はありませんが、コアに必要な機能があるため、魅力的であると感じるかもしれません。
転生

回答:


76

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


生まれつき?いいえ。しかし...

いいえ、Markdownの構文はできません。Markdown Extraを介してID値設定できます

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

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

2
(MaRuKuパーサーでテスト済み)テキスト行の先頭に「{.class-name}」を使用すると、Pタグを実行できます。ただし、id部分は無視されます。
David Hutchison 2013

75

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

Normal *markdown* paragraph.

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

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


31
このアプローチの問題は、内部テキストがもうマークダウンされないことです。
akauppi

@akauppiはい; ただし、これはspanタグを使用すると回避できます。
Seraphendipity

13

環境が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の作成者です。


Markdown It Rocks !!
Ole

8

マークダウンの人はすべきだはこの機能がが、ありません。代わりに、言語固有のMarkdownスーパーセットが必要です。

PHP: Markdown Extra
Ruby: Kramdown Maruku

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


7

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

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }


3

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

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

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

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

これの欠点は、出力コード<p><div>行を折り返すタグがあることです(1つは一致しないため、1つは一致しないため、2つ目です。ブラウザーがこれについてわずらわしく思ったことはありませんが、コードはt検証MDは<p>とにかく予備のタグを付ける傾向があります。

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

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

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


注:コードマーカーを使用していることを確認してください。HTMLタグとして解釈されたため、この投稿のほとんどは非表示になりました。
Lawrence Dol、2014年

おかげで-DIVハックは、pegdown / cegdownで動作するように見える唯一の答えです。(Pegdownもプラグインで拡張できるので、長期的にはそうするかもしれません)
Korny

2

スリムな値下げにこれを使用します。

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

翻訳先:

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

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エディタに当てはまるようです。


0

JavaScriptの目的でセレクターが必要なだけの場合(私が行ったように)、またはのhref代わりに属性を使用することもできます。classid

これを行うだけです:

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

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

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

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

    ... do your thing ...

    event.preventDefault();
});

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.