What are the different ways to customize content inside a post (custom attributes and such)

Support
1

So far I’m aware of two way to do it:

  1. <span data-theme-custom>some text</span>

    CSS:

    [data-theme-custom] {
    color: pink;
}

  2. [wrap="indent"]some text[/wrap]
    It will create either a div or a span (if there is other content on the same line), containing the following attributes: class="d-wrap" and data-wrap="custom"

    CSS

     [data-wrap="custom"] {
     color: pink;
 }

Are there other ways to customize some chosen content in a post I’m not aware of?
Also, is there a way to add a custom class to an element? Couldn’t find anything in the search. I guess this is not possible?

2 Likes
2

May I shamelessly bump this?

I couldn’t find any topic listing all the ways to customize a post HTML content using inherent Discourse’s composer.

If there are others than the two I mentioned -which are very similar-, maybe a howto could be useful?

1 Like
3

I’d also be curious to see which HTML tags work in the composer. I think I had seen it somewhere before but couldn’t find it earlier today.

For example, I was trying to add a <button class="success">Click me</button> to the composer, it showed in the preview but failed when I posted it. I think some HTML tags work, just not sure which ones.

4

I guess this is the default allowed HTML tags and attributes:

We can see that the attribute data-* is allowed.

This file contains the [wrap=*] text [/wrap] way to customize an element as well that adds the data-wrap attribute with the * value…

I couldn’t find anything more yet.

1 Like
5

It is possible to uses some HTML classes in Discourse, however, most HTML in a post is sanitized for security reasons, and only very strict whitelisted HTML is allowed in markdown. To add classes to the white-list you must use a plugin, the sanitization happens server side as well as client side. Check out
Whitelisting HTML tags / attributes for some details on where to add the whitelisted attributes, and I believe it would look similar to something like this: Discourse HTML Whitelist. and as @RGJ has mentioned, please note that the whiteList() function is deprecated and it is called allowList() nowadays.

Regarding other ways that you could customize content, posts are widgets, and Discourse themes have the ability to decorate widgets so you could leverage on that.

I hope this helps!

7 Likes
6

Thanks for your reply!

I stumbled upon your first link this afternoon.

The github link files are 7 years old so I suppose the code might be outdated?

Anyway, I used this:

export function setup(helper) {
    if (!helper.markdownIt) { return; }
  
    helper.registerOptions((opts, siteSettings) => {
      opts.features.nolinkify = siteSettings.no_linkify_enabled;
    });
  
    helper.allowList(["span.nolinkify"]);
}

Which I borrowed from GitHub - unfoldingWord/discourse-mermaid: Adds the Mermaid JS library to discourse

There are only a few lines of code in my plugin and I don’t really know what it’s doing and if all is needed, but at least I can add spans with a nolinkify class.

In my case, the purpose was to easily “unlinkify” words in posts with Linkify Words (it only accepts tags and classes to prevent linkification), and especially words in titles HTML tags while using DiscoTOC - automatic table of contents

I also tried a bbcode syntax based solution like this:

    helper.registerPlugin(md => {
      md.inline.bbcode.ruler.push("nolinkify",{
        tag: "nolinkify",
  
        replace: function(state, tagInfo, content) {
          const token = state.push("html_raw", '', 0);
          const escaped = state.md.utils.escapeHtml(content);
          token.content = `<span="nolinkify ">${escaped}</span>`;
          return true;
        }
      });
    });

So, I tried both solutions for my title tags problem with the table of content.
This doesn’t work:

## [nolinkify]test[/nolinkify]

But this works:

## <span class="nolinkify">test</span>

I’d have preferred the first syntax, but I guess it’s incompatible with the table of content because of the scripts’ order of executions…

3 Likes
7

That code does not work any more. It’s better to remove that from your post.

The answer is in the topic linked to, as @canapin already found out.

Please note that the whiteList() function is deprecated and it is called allowList() nowadays.

3 Likes
8

Ah, yes, it was even mentioned in the console :+1:

3 Likes
9

Thank you for confirming that, the original post has been updated for accuracy.

2 Likes
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.