⛵ Replicate GitHub Flavored Markdown with Tailwind CSS components

  • By Ian Dinwoodie
  • Last update: Dec 21, 2022
  • Comments: 1

github-markdown-tailwindcss

Replicate GitHub Flavored Markdown with Tailwind CSS components

🔩 Usage

To use, include the provided style sheet (markdown.css) and add the markdown class to any element that you wish to render as Github Flavored Markdown (GFM).

Example

Header"> 

<h1>Headerh1>


<h1 class="markdown">Headerh1>

favicon-32x32 Working with Hugo

You can use this style sheet to style your generated Hugo content. To do so, wrap your content with an element that contains the markdown class.

Example

{{ .Content }}
"> 
<div class="markdown">
  {{ .Content }}
div>

🕊️ Nesting

For those of you who wish to have the class rules nested I have provided a simple python script (nest.py) to generate a style sheet with nesting (markdown-nested.css). The nesting script just applies a very simple reformatting.

Using the Nest Script

python nest.py

👬 Contribution

  • Report issues
  • Open pull requests with improvements
  • Spread the word

📖 References

The idea to use the @apply directive to create rules for a Markdown class was concieved by @adamwathan (the creator of Tailwind CSS). He first publicized this idea in a comment on an issue in the Tailwind CSS discussion repository.

Github

https://github.com/iandinwoodie/github-markdown-tailwindcss

Comments(1)

  • 1

    I would like to know why markdown-nested.css is not working

    Im using a hugo theme

    that utilize tailwind css

    I manage to use the markdown.css

    but when i try to use the generated markdown-nested.css file from a python command

    I dont see any changes like the one when using the markdown.css u provide...

    Am I missing something on my postcss.config.js?

    this is my post.config.js

    const themeDir = __dirname + '/../../';

const purgecss = require('@fullhuman/postcss-purgecss')({

    // Specify the paths to all of the template files in your project
    content: [
        themeDir + 'layouts/**/*.html',
        themeDir + 'exampleSite/content/**/*.html',
        'layouts/**/*.html',
        'content/**/*.html',
    ],

    // This is the function used to extract class names from your templates
    defaultExtractor: content => {
        // Capture as liberally as possible, including things like `h-(screen-1.5)`
        const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

        // Capture classes within other delimiters like .block(class="w-1/2") in Pug
        const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

        return broadMatches.concat(innerMatches)
    }
})

module.exports = {    
    plugins: [        
        require('postcss-import')({
            path: [themeDir]
            }), 
        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
        require('autoprefixer')({
            path: [themeDir]
        }),
        ...(process.env.HUGO_ENVIRONMENT === 'production' ? [purgecss] : [])
    ]
}

Popular Tag

Related