How To Add Color,font Size To Markdown Content

• Markdown - Tutorials
• Markdown - restructured text
• Markdown - Cheatsheet
• Markdown - Comments
• Markdown - Block Elements
• Markdown - Styles
• Markdown - asciidoc
• Markdown - Blockquotes
• Markdown - Emphasis
• Markdown - Heading
• Markdown - Images
• Markdown - Links
• Markdown - Table
• Markdown - Horizontal Rule
• Markdown - Slack
• Markdown - Superscript
• Markdown - Twitch panels
• Markdown - Jira
• Markdown - List
• Markdown - R studio
• Markdown - Github checkbox
• Markdown - Github Cheatsheet
• Markdown - PDF Conversion
• Markdown - FAQ
• Markdown - Folder Structure
• Markdown - Github Image
• Markdown - line break
• Markdown - TOC
• Markdown - CSS
• Markdown - Letter List
• Markdown - Text highlight
• Markdown - Code Fenced
• Markdown - Indent

On this page

• Markdown color styles content

1. Home
2. File Extension - tutorials
3. Markdown - Tutorials
4. Markdown - Styles

Markdown - Styles

How to add styles such as color font weight and font-size to Markdown text content examples. It covers syntax for plain HTML and CSS selector ..

Sometimes, Markdown content requires adding styles such as CSS attributes like color and font sizes, and weight attributes.

However, Natively Markdown does not support CSS styles, the same also does not work in the readme.md files in GitHub or any Markdown parsers.

There are multiple ways to achieve this.

Then, How do apply the color text to Markdown content?

Markdown color styles content

color adds to markdown content in two ways

• use inline HTML in Markdown for styles

Since Markdown converted to HTML code. Most of the Markdown parsers support HTML code.

So, Write inline HTML code in markdown content. Added span tag with inline styles for changing color, font weight, and font size.

Below HTML code added to markdown files(.md extension)

<span style="color:green;font-weight:700;font-size:20px"> markdown color font styles </span>

And output you can see on the browser is below.

Markdown color font styles

Generated Output

<span style="color:green;font-weight:700;font-size:20px"> markdown color font styles </span>

• use CSS styles in markdown content

Another way using define CSS styles

• Define CSS styles using selector as seen below
• add content inside selector tags

<style> red { color: red } yellow { color: yellow } </style> <red> red color markdown text</red> <yellow> red color markdown text</yellow>

Generated HTML

<p><red> red color markdown text</red> <yellow> red color markdown text</yellow></p>

You can see the content styled in the browser as

red color Markdown text red color Markdown text

My Bold Text, in red color.{: style=“color: red; opacity: 0.80;” }

The above two ways work with almost all markdown parsers.

However, there are other ways we can do with different syntax with markdown content in Kramdown and Jekyll.

← Markdown - Block ElementsProperties File - escape characters →