以前この機能を追加したのですが、お知らせするのを忘れていました。現在は、プラグインを作成せずにテーマコンポーネントで利用できるよう、Markdown に特別な構文を追加できるようになりました。
// div.d-wrap で囲まれます
[wrap=baz foo=bar]Content[/wrap]
// div.d-wrap で囲まれます
[wrap=baz foo=bar]
Content
[/wrap]
// div.d-wrap で囲まれます
[wrap=baz foo=bar]
[/wrap]
// これは div.d-wrap ではなく span.d-wrap としてレンダリングされます
a [wrap=baz]Content[/wrap] b
コンポーネント名は data-wrap="baz" という data 属性として、またすべてのプロパティも要素上の data-foo="bar" のような data 属性として追加されます。
実際の使用例については、以下をご覧ください。
こんにちは、ジョフリーさん
他のトピックでこの機能を提案してくださり、ありがとうございます。
実際に試して、私のケースで使えるか確認してみたかったのですが、問題が発生しました。
複数のハイフンが含まれる属性名が無視され、最後のハイフンの後の文字のみが選択されるようです。
使用しているバージョンは v2.4.0.beta2 +33 です。もしそれ以降のコミットで修正されている場合は、申し訳ありません。
例:
// 複数のハイフンがない場合は正常に動作します: data-bloodmallet="chart"。
[wrap=test bloodmallet=chart]コンテンツ[/wrap]
// この場合、属性名から "user" が省略され、出力が data-id="1" となり、data-user-id="1" にはなりません。
[wrap=test2 user-id=1]コンテンツ[/wrap]
以下のリクエストは任意です: コンテンツを div 内で
タグで囲まないようにする方法はありますか？
この機能を提供してくださり、ありがとうございます。ぜひ私の問題を解決するために使えたらと思います！
最初の問題は解決できます
これに対する修正をプッシュしました。わずかな違いとして、foo-bar ではなく fooBar をサポートします。これで以下のように記述できるようになりました：
[wrap=foo userId=1]
[/wrap]
すると以下が生成されます：
<div data-wrap="foo" data-user-id="1">
</div>
@j.jaffeux さん、こんにちは
この機能を提供してくださりありがとうございます！トピック内に以下のような機能を追加するための最適な方法はご存知でしょうか？
<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Product #1" data-item-price="10.99">
Add to cart
</button>
また、一般的に以下のような属性をホワイトリストに追加する方法についても教えていただけますでしょうか？
class="snipcart-add-item" data-item-id="product-1"
テーマコンポーネントでラップを装飾する必要があります。例えば、こちらのようにしてください：discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub
@j.jaffeux 素晴らしいアドバイス、ありがとうございます！
最近、以下を使用して汎用コンポーネントをサポートするように拡張しました。
```customblock param=1
```
これは以下に翻訳されます。
<pre data-code-param="1" data-code-wrap="customblock"><code></code></pre>
したがって、コンポーネントとして data-code-wrap を使用して特別な処理を決定でき、シンタックスハイライトは無効になります。
このパターンはここで使用しました。
これは公式の Mermaid テーマコンポーネントです。