GitHub Flavored Markdown doesn't render CSS styles inside a HTML block

[ZeroAurora]

Hey here,
I’m recently writing a README.md and I want to decorate it with styles available in CSS, text-align: center for example, since the <center> tag and the align attribute is deprecated as said in MDN. So I used a HTML block in the markdown file:

<div style="text-align: center;">
Here are some markdowns.
</div>

However when GitHub rendered it, the style attribute was automatically removed and no CSS style was applied.

<div>
<p><i>Here are some markdowns.</i></p>
</div>

I wonder if there is a way to use CSS within a markdown file. If not, I’d like to know why. Thank you!

[SethClydesdale]

Hello @ZeroAurora,

Unfortunately you cannot use CSS in GitHub markdown as it is a part of the sanitization process.

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes.

source: https://github.com/github/markup

While CSS can’t be super malicious, one could create a number of nuisances with it, such as for example, an element that takes up the entire page and blocks user interaction. I admit it would be nice to use at least some styles for alignment and what not, but it’s understandable.

In regards to centering, the align attribute is the only method that will work currently. Despite being deprecated, it’s still rendered, for now anyway.

<p align="center">centered content</p>

[bilogic]

Can it be bypassed?

[JaiS99]

no

[levdoescode]

Can it be bypassed?

You can embed styling inside an SVG
https://pragmaticpineapple.com/adding-custom-html-and-css-to-github-readme/

[scottyschup]

The SVG hack doesn't appear to work anymore :/

[LizzieSpace]

let's hope the allign atribute continues rendering for a veery long time...