👅 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

29 Likes

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:

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.

4 Likes

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

b) with component:
Screenshot_3

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)

2 Likes

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

/admin/customize/themes/1/common/scss/edit

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