以前この機能を追加したのですが、お知らせするのを忘れていました。現在は、プラグインを作成せずにテーマコンポーネントで利用できるよう、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 属性として追加されます。
実際の使用例については、以下をご覧ください。
Hello Joffrey,
Thanks for suggesting this feature in the other topic.
I was excited to try to use it and see if it worked for my case, however I encountered a problem.
It seems to ignore attribute names that has multiple hyphens in between and defaults to only pick the characters after the last hyphen.
I am using v2.4.0.beta2 +33, I apologize if this has been fixed in a newer commit since.
Examples:
// No multiple hyphen this works fine: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Content[/wrap]
// This way it omits "user" from the attribute name and output is data-id="1" instead of data-user-id="1".
[wrap=test2 user-id=1]Content[/wrap]
This following request is optional: Is there a way to not wrap the content inside the div with <p> tag?
Thanks for this feature and hopefully I can use it to fix my problem!
I can fix the first issue
I just pushed a fix for this, slight difference is that I won’t support foo-bar but fooBar. So you can now write:
[wrap=foo userId=1]
[/wrap]
And you will get:
<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 テーマコンポーネントです。