👅 Markdown Flavors

:mag: 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.

:question: Why might you want this

This can be installed purely for stylistic purposes or to solve issues such as mentioned here.

:memo: Examples

:link: Quick Links

Install 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:

  1. flavor=GitHub makes the table totally black
  2. flavor=Gitlab makes the header black
  3. flavor=Bitbucket work ok



1 Like

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 :slight_smile: .

@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)

1 Like

Aah, understood. Really, fonts are similar to Gitlab/GitHub. Thanks for explanation! Brilliant idea, this is more than expected from “just a theme component” :clap:

1 Like

Finally I applied original code block formatting over Gitlab layout :slight_smile: (works on default theme):


// 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: Screenshot_4