Support custom class and attributes for HTML blocks

[CxRes]

To Replicate:

Add the following css to base.user.css or github.user.css

.left {
  color: red;
}

Start Typora and create a html block:

<div class="left">
    foo
</div>

The color of foo remains black.

When you inspect the code (in view mode, not editing mode), it is rendered as:

<div>
    foo
</div>

The attributes are missing. Consequently the style is not applied!

Typora 0.9.70 Windows 10 x64

[tschroeter]

Are there any reason why the class attribute in inline HTML blocks will be filtered in the resulting HTML?

I would be happy if it will be supported.

[abnerlee]

@tschroeter There are some “Historical Problems“ here since HTML is not supported from the beginning: We also use class for styling and logics, and we also import styling from 3rd libraries likebootstrap which add styles for class attributes. So before we separate all class we use from what users would use, we cannot enable class support.

[toolchild]

This works for me in the HTML export, but not in the Typora Preview of the Markdown. But my Typora version is a bit newer.

github.user.css .green{ background: rgba(0, 255, 0, 0.5); }

Markdown File <div class="green">some text with green background, that is not green in the Markdown Preview but in the exported HTML</div>

It would be cool if it would be able to already see the custom styles in the Preview.

Typora: version 0.9.72(beta) Windows 10 x64

[johnwry]

has this issue been resolved?

[abhitrueprogrammer]

has this issue been resolved?

Nope, not yet

[wangyingang]

Is there a workaround?

[tian-yan]

I found that <div class="test">content</div> would be rendered to a complicated (a nested <div> structure) HTML code snippet, and class="text" disappeared in the rendered output. I feel that rendering is a bit complicated and unpredictable.

Can we support custom class and attribute in the same way as python-markdown ? for example, This is a paragraph. {: #someid .someclass some_attribute='some_value' } will be rendered as <p id='someid' class='someclass' some_attribute='some_value'> This is a paragraph</p>.

[DarwinJS]

Struggling with the same to make highlighting more useful.

Putting the below in base.user.css as per: https://support.typora.io/Add-Custom-CSS/, but it is ignored when using the "MARK" tag.

/* DJS Highligh colors for mark element and spans */
mark, .hlyellow {
  background-color: rgb(2255, 247, 175);
}

.hlpink {
  background-color: rgb(255,191,206);
}

.hlblue {
  background-color: rgb(178,205,251);
}

.hlorange {
  background-color: rgb(255,215,174);
}

.hlgreen {
  background-color: rgb(169, 250, 169);
}

[Enigmatisms]

Is this feature going to be added in the later versions?

[Ziflin]

Can we support custom class and attribute in the same way as python-markdown ? for example, This is a paragraph. {: #someid .someclass some_attribute='some_value' } will be rendered as <p id='someid' class='someclass' some_attribute='some_value'> This is a paragraph</p>.

I've been wanting this for years as trying to use html breaks Markdown formatting inside html blocks (which defeats the purpose of using Typora, etc.). This would really solve a bunch of issues that currently keep me from using Markdown more often.

[jlarmstrongiv]

I was hoping that the custom css https://support.typora.io/Add-Custom-CSS/ along with html support https://support.typora.io/HTML/ would give me the flexibility I needed. Unfortunately, the class attributes are not rendered in preview mode.

@abnerlee are there any workarounds? I wouldn’t mind targeting my css with obscure css selectors or data-attributes. It doesn’t matter if it’s hacky so long as it works.

[jlarmstrongiv]

Found a workaround!

Give a supported tag a custom style, e.g.

<p style="-typora-class: eyebrow-text;">Workaround for custom classes</p>

Then, target that with attribute selectors, e.g.

[style*="-typora-class: eyebrow-text"] {
  color: green;
}

[ajaxray]

Hello @jlarmstrongiv , Thanks for sharing the cool trick!

I've made my callouts following your idea 😄 . Check it here - https://gist.github.com/ajaxray/d5302dfe1418ef1c5b41e758225d8215