web-dev-qa-db-ja.com

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

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

cssmarkdown
117
Ryan Florence

デュープ： MarkdownでHTMLクラス属性を設定する方法

ネイティブですか？いいえ。しかし...

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

通常の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>
68
Sampson

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

Normal *markdown* paragraph.

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

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

66
Matt Bridges

マークダウンにはこの機能があるはずですが、そうではありません。代わりに、言語固有のマークダウンスーパーセットが必要です。

PHP：Markdown Extra
ルビー：Kramdown 、 Maruk

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

7
Yarin

ご使用の環境が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の著者です。

6
arve0

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

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

リファレンス： https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

5
midzer

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

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }
4
franc

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

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

したがって、次の回避策があります。

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

これの欠点は、出力コードに<p>タグが<div>行をラップしていることです（最初の行はそうではないため、2番目の行は一致しないためです。私は発見しましたが、コードは検証しませんMDはとにかく予備の<p>タグを入れる傾向があります。

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

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

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

3
Sherwood Botsford

スリムマークダウンでこれ：

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

翻訳先：

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

JavaScriptの目的でセレクタが必要な場合（私がしたように）、hrefまたはclassの代わりにid属性を使用したい場合があります。

これを行うだけです：

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

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

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

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

    ... do your thing ...

    event.preventDefault();
});

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

0
Tintin81