The Markdown Flavors theme component allows users to select a markdown style inspired by formats commonly used on the web, such as GitHub, GitLab, and Bitbucket. keegan created the component, which can be installed for stylistic purposes or to solve issues with inline code readability.
Ivan_Rapekas tested the component and reported some issues with dark mode and font changes. keegan provided a quick fix for the dark mode issue and explained that the font changes were intentional to imitate the font choices used in markdown by each respective flavor.
Ivan_Rapekas noticed the font changes and keegan confirmed the intention behind them. Ivan_Rapekas appreciated the attention to detail and Ivan_Rapekas also shared a workaround to apply original code block formatting over the GitLab layout.
Heliosurge inquired about updating the component to use color schemas, and keegan mentioned that an update might happen in the future, but recommended an alternative component in the meantime. Heliosurge appreciated the suggestion but was particularly interested in the table readability enhancements provided by the Markdown Flavors component.
OverviewThis 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 thisThis can be installed purely for stylistic purposes or to solve issues such as mentioned here.
Examples
Quick LinksInstall Theme Component
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:
GitHub:
Gitlab:
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. If you uncheck this in your theme settings this issue should be resolved for you.
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 <kbd> </kbd> 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 
.
@Ivan_Rapekas Yeah that’s correct. I tried to imitate the font choices used in markdown by each respective flavor (i.e GitHub.com’s markdown font is used when you select GitHub flavor)
Aah, understood. Really, fonts are similar to Gitlab/GitHub. Thanks for explanation! Brilliant idea, this is more than expected from “just a theme component” 
Finally I applied original code block formatting over Gitlab layout (works on default theme):
/admin/customize/themes/1/common/scss/edit
Get the code 
Documentation
// Original <kbd> 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:
Hi I was wondering if this component will be updated to use color schemas? Ie primary, secondary etc..
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?
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. 