# 👅 Markdown Flavors
**URL:** https://meta.discourse.org/t/markdown-flavors/208844
**Category:** Theme component
**Created:** [November 11, 2021, 12:21am UTC](https://meta.discourse.org/t/markdown-flavors/208844 "2021-11-11T00:21:09Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [November 11, 2021, 12:21am UTC](https://meta.discourse.org/t/markdown-flavors/208844/1 "2021-11-11T00:21:10Z")
## 🔍 Overview
This theme component allows you to select a flavor for which markdown style you want outputted when making posts. Each markdown ‘flavor’ is inspired by a format of markdown commonly used on the web.
## ❓ Why might you want this
This can be installed purely for stylistic purposes or to solve issues such as mentioned [here](https://meta.discourse.org/t/inline-code-dificult-to-identify/208776).
### 📝 Examples
### 🔗 Quick Links
| | | |
| --- | --- | --- |
| [🐙 Get the code](https://github.com/keegangeorge/discourse-markdown-flavors) | | |
| [❓ Installation Guide](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) | | |
| [🔍 Preview](https://try.thepavilion.io/t/markdown-examples/1612) | | |
| [🗞 Documentation](https://thepavilion.io/t/markdown-flavors/4947) | | |
Install Theme Component
---
### Author:  [@Ivan\_Rapekas](https://meta.discourse.org/u/Ivan_Rapekas)
#### Post date: [November 12, 2021, 7:11am UTC](https://meta.discourse.org/t/markdown-flavors/208844/2 "2021-11-12T07:11:17Z")
Hi, thank you for this component!
Just tested it in Windows 11 with dark theme. Discourse with default light theme.
Everything works as described but:
1. flavor=GitHub makes the table totally black
2. flavor=Gitlab makes the header black
3. flavor=Bitbucket work ok
GitHub:
Gitlab:
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [November 16, 2021, 7:37pm UTC](https://meta.discourse.org/t/markdown-flavors/208844/3 "2021-11-16T19:37:28Z")
Hey @Ivan_Rapekas,
Thanks for letting me know about this issue. I had some custom color variables that auto change based on the user’s system dark/light mode preference. However, if you don’t have the auto-dark mode switching on your Discourse, this issue occurs. Especially if you have a Light theme on Discourse but your system is set to Dark mode.
As a quick fix for this, [I’ve added a setting that toggles the auto dark theme switching](https://github.com/keegangeorge/discourse-markdown-flavors/commit/247eb7757617a6598118546e8d4c5d64c2af688f). If you uncheck this in your theme settings this issue should be resolved for you.
---
### Author:  [@Ivan\_Rapekas](https://meta.discourse.org/u/Ivan_Rapekas)
#### Post date: [November 17, 2021, 4:57am UTC](https://meta.discourse.org/t/markdown-flavors/208844/4 "2021-11-17T04:57:20Z")
Hi @keegan !
Thank you for the reply and quick fix! This helped me.
Unfortunately, I have to notice that at all this component changes the font:
a) component disabled:
b) component enabled:
Also it changes ` ` in a table cell (the scale is the same):
a) original:
b) with component:
This is just a notice, no need to fix it, I think 🙂 .
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [November 17, 2021, 5:42am UTC](https://meta.discourse.org/t/markdown-flavors/208844/5 "2021-11-17T05:42:30Z")
@Ivan_Rapekas Yeah that’s correct. I tried to imitate the font choices used in markdown by each respective flavor (i.e [GitHub.com](http://GitHub.com)’s markdown font is used when you select GitHub flavor)
---
### Author:  [@Ivan\_Rapekas](https://meta.discourse.org/u/Ivan_Rapekas)
#### Post date: [November 17, 2021, 6:05am UTC](https://meta.discourse.org/t/markdown-flavors/208844/6 "2021-11-17T06:05:41Z")
Aah, understood. Really, fonts are similar to Gitlab/GitHub. Thanks for explanation! Brilliant idea, this is more than expected from “just a theme component” 👏
---
### Author:  [@Ivan\_Rapekas](https://meta.discourse.org/u/Ivan_Rapekas)
#### Post date: [December 5, 2021, 2:44pm UTC](https://meta.discourse.org/t/markdown-flavors/208844/7 "2021-12-05T14:44:13Z")
> [@Ivan\_Rapekas](#):
>
> a) original:
> 
>
> b) with component:
> 
Finally I applied original code block formatting over Gitlab layout 🙂 (works on default theme):
`/admin/customize/themes/1/common/scss/edit`
```css
// Original over Gitlab theme component
.cooked kbd {
align-items: center;
border: 1px solid var(--primary-low-mid);
background: var(--primary-very-low);
border-bottom-width: 2px;
border-radius: 3px;
box-sizing: border-box;
color: var(--primary);
display: inline-flex;
font-size: var(--font-down-1);
justify-content: center;
line-height: var(--line-height-large);
margin: 0 0.15em;
min-width: 24px;
padding: 0.15em 0.6em;
}
```
This makes: 
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [October 6, 2024, 6:25pm UTC](https://meta.discourse.org/t/markdown-flavors/208844/8 "2024-10-06T18:25:30Z")
Hi I was wondering if this component will be updated to use color schemas? Ie primary, secondary etc..
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [October 7, 2024, 6:23pm UTC](https://meta.discourse.org/t/markdown-flavors/208844/9 "2024-10-07T18:23:19Z")
I haven’t had time to update this, but I will try to fit some time in sometime soon.
In the meantime perhaps this #official component might suit your needs?
> [@Customized Inline Codeblocks](https://meta.discourse.org/t/customized-inline-codeblocks/229452):
>
> discourse2Summary Customized Inline Codeblocks allows you to change the styling of the inline codeblocks to add more visual separation between the code and other elements.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/customized-inline-codeblocks)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-inline-codeblock-styles](https://github.com/discourse/discourse-inline-codeblock-styles)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features With component: …
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [October 7, 2024, 6:34pm UTC](https://meta.discourse.org/t/markdown-flavors/208844/10 "2024-10-07T18:34:29Z")
Yeah that one is cool for sure. Was more looking at the tables your component here enhances table readability vs core. By using a more tradition table layout with vertical lines separators.
I appreciate how big the team workloads must be. No hurry, just though would inquire as only just recently found your TC. 😉