MD Composerの追加機能

[Johani (Joe)]

[center] のようなタグには引き続きプラグインが必要ですが、ご指摘の通りです @Steven

このコンポーネントが作成された当時は、HTML の <div> タグを使用する必要がありました。しかし、現在はテーマやコンポーネント内で [wrap="foo"][/wrap] を使用できるようになりました。

詳細については、こちらをご覧ください。

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

簡単な例を以下に示します。

[wrap="center"] 
中央揃えのテキスト
[/wrap]

投稿がレンダリングされると、このマークアップが生成されます。

<div class="d-wrap" data-wrap="center">
  <p>中央揃えのテキスト</p>
</div>

これにより、CSS 属性セレクタ を使用して以下のようにターゲットを指定できます。

[data-wrap="center"] {
  text-align: center;
}

これにより、作曲プレビューとレンダリングされた投稿の両方で、以下のような表示になります。

または

[wrap="right"] 
右揃えのテキスト
[/wrap]

これにより、以下のレンダリングされたマークアップが生成されます。

<div class="d-wrap" data-wrap="right">
  <p>右揃えのテキスト</p>
</div>

その後、この CSS を追加します。

[data-wrap="right"] {
  text-align: right;
}

これにより、以下のような結果になります。

現在、このコンポーネントは HTML の align 属性を使用しているため、この変更は 100% 下位互換性があります。

お時間があればお試しください。ご質問がございましたら、PM でお知らせください。