投稿本文内のリンクにスタイリング用のクラスを追加する

開発
1

Discourse がアンカーを、ボタンとして表示したいように再フォーマットしない方法はありますか？具体的には、独自のスタイルを適用したいと考えています。

投稿は .raw プロパティを使用して行っています（API の説明とは異なり、.cooked はサポートされていないようです）。

以下のように投稿しました：
<a aria-label="homepage-link" href="http://blablabla...">View Homepage</a>

しかし、Discourse の投稿やカテゴリの説明では、以下のように表示されます：
<div class="cooked"><a>View Homepage</a></div>

他にも試しました

[View this page][http://blablabla]

これは以下に変換されました：
<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">http://blablabla</a></div>

もし以下のように表示されれば、CSS で body 要素からターゲットを指定し、必要なボタンスタイルを適用できる可能性があります：
<div class="cooked"><a href="http://blablabla" class="onebox" target="_blank">View this page</a></div>

2

Resolved I think…

[view this page](http://blablabla)

Target CSS using:

body.<insert name of top category here>-* div.cooked a

However

If someone has a solution for the above it would be a little cleaner and easier to add our own classes to the <a> link and avoid top Category.

Thanks in advance.

3

The way to do that is to use something like

For example

[wrap=link-button][Link Text](http://meta.discourse.org)[/wrap]

renders as

Link Text

and the markup is

<div class="d-wrap" data-wrap="link-button">
  <p>
    <a href="http://meta.discourse.org">Link Text</a>
  </p>
</div>

and you can then style it in CSS using

[data-wrap="link-button"] {
  a {
    // styles for the link
  }
}

You can change [wrap=link-button] to any value you want like

[wrap=custom-button]
or
[wrap=home-link]
or
[wrap=foobar]

and then use that to target the link like the example above.

「いいね！」 8
4

@Johani Very interesting!!! Thanks for your work on this, we will look into this option, it would be great to have in the API docs on Post raw property settings in the future. Or a central doc that groups/defines all possibilities with Post’s UPDATE:/POST: property