gridsome-plugin-remark-shiki

gridsome-plugin-remark-shiki copied to clipboard

Hey all,

I am running into an issue where my code blocks are not highlighted, based on the language choses in my code lock. They are all plain white. Tried everything, not sure what to do, would love if someone took a look. Thanks a ton in advance.

I use vue-remark:

gridsome.config.js

module.exports = {
    ...
    plugins: [
        {
            use: '@gridsome/vue-remark',
            options: {
                typeName: 'Post',
                path: 'content/articles/*.md',
                baseDir: './content/articles',
                route: '/:slug',
                template: './src/templates/Post.vue',
                plugins: [
                    ['gridsome-plugin-remark-shiki', { skipInline: true, theme: 'min-dark' }],
                    ['@noxify/gridsome-plugin-remark-embed', {
                        'enabledProviders' : ['Youtube', 'Twitter', 'Gist'],
                    }]
                ],
            },
        },
    ],
    ...
}

Post.vue

<!-- Tailwind for styling -->
<VueRemarkContent class="prose-sm prose md:prose-2xl"></VueRemarkContent>

.md file

\```python
%matplotlib inline

# Standard Libraries to import
import pandas as pd
import matplotlib.pyplot as plt
import numpy as np

dataset = pd.read_csv('data/processed/clean_dataset.csv', index_col=0)
\```

and this is the result:

Don't escape code fences. Remove \ and things should work fine.

@naiyerasif ,

I don't use the \ in my code. Added here to escape the bacticks.

I have the same issue.. Prism doesn't seem to work either.

Its about usage with VueRemark right ?

Does one of you affected have a public repo with that issue that I could take a look at ?

This is my repo -> https://github.com/rasulkireev/gridsome-personal-webite

• Gridsome Config File - lines 18-33. That's where I register the Markdown Source with shiki plugin.
• Post Template - line 31. I use this template to render the post.
• Example Post -> url

Thanks for looking into this @EldoranDev

Have the exact same issue.

@EldoranDev, understand that you have a ton of things going on, so not pushing, just wanted to ask: Did you get the chance to look at the issue?

I was doing more research, and I should probably mention that I am also using TailwindCSS via the gridsome-plugin-tailwindcss. I think the issue is that Tailwind config somehow overwrites Shiki styles.

I was able to bypass the issue with this plugin.