👅 Markdown Flavors

Theme component
1

banner
banner1440×1024 85.1 KB

: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

examples
examples1440×1024 115 KB

:link: Quick Links
:octopus: Get the code
:question: Installation Guide
:mag: Preview
:newspaper_roll: Documentation

Install Theme Component

29 Likes
2

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:

изображение
изображение790×458 21.9 KB

Gitlab:

изображение
изображение805×162 7.41 KB

1 Like
3

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.

Screen Shot 2021-11-16 at 11.35.21 AM
Screen Shot 2021-11-16 at 11.35.21 AM968×162 18.5 KB

4 Likes
4

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:

изображение
изображение817×177 31.6 KB

b) component enabled:

изображение
изображение815×181 11.1 KB

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

5

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

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
7

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

8

Hi I was wondering if this component will be updated to use color schemas? Ie primary, secondary etc…

2 Likes
9

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?

1 Like
10

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

1 Like