Document how to use a custom Shiki theme

[nujovich]

What kind of changes does this PR include?

• New or updated content

Description

• Closes Document that markdown.shikiConfig.theme can be a relative path #1715
• Add config example for Shiki's relative path themes
• Visual changes

Before

After

I am actively participating in Hacktoberfest and Hacksquad 2022 🙌.

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	586d4af
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/635bb3d5cb4c500009a1402e
😎 Deploy Preview	https://deploy-preview-1749--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[sarah11918]

Thanks for tackling this issue, @nujovich! 🥳 A great first contribution!

I'm wondering whether this deserves an entire new code block, though, and maybe we can work it into the existing example itself? Or at the very least, what about a condensed second example that just shows the theme property and not the whole thing? Would you be willing to make that second code example smaller so we can see what that looks like?

[nujovich]

Sure @sarah11918! Let me work on that!

[kevinzunigacuellar]

Hello @nujovich and @sarah11918,

I was trying to add a new theme to my config file. I noticed that any string passed to shikiConfig.theme will try to resolve to the themes folder inside the shiki package.

So in order to add your own theme to the package you will need follow shiki's guide: add a new theme. This will modify your shiki package and add the theme to the list of themes.

However, shiki is not a direct dependency of your project then there would be more steps to add your own theme 😥

An easier way to do this is to import the json and pass it to shikiConfig.theme

import { defineConfig } from 'astro/config';
import customTheme from './src/custom-themes/dracula.json';

export default defineConfig({
  site: 'https://example.com',
  markdown: {
    shikiConfig: {
      theme: customTheme,
    },
  },
});

Hope this helps 😇

Oh btw here is the stackblitz

[nujovich]

Hello @nujovich and @sarah11918,

I was trying to add a new theme to my config file. I noticed that any string passed to shikiConfig.theme will try to resolve to the themes folder inside the shiki package.

So in order to add your own theme to the package you will need follow shiki's guide: add a new theme. This will modify your shiki package and add the theme to the list of themes.

However, shiki is not a direct dependency of your project then there would be more steps to add your own theme 😥

An easier way to do this is to import the json and pass it to shikiConfig.theme

import { defineConfig } from 'astro/config';
import customTheme from './src/custom-themes/dracula.json';

export default defineConfig({
  site: 'https://example.com',
  markdown: {
    shikiConfig: {
      theme: customTheme,
    },
  },
});

Hope this helps 😇

Oh btw here is the stackblitz

Awesome ! I will try that and add it to the docs.

[delucis]

Thanks again for your contribution @nujovich! Welcome to team docs 🥳

[Ivluengo]

Hello @nujovich and @sarah11918,

I was trying to add a new theme to my config file. I noticed that any string passed to shikiConfig.theme will try to resolve to the themes folder inside the shiki package.

So in order to add your own theme to the package you will need follow shiki's guide: add a new theme. This will modify your shiki package and add the theme to the list of themes.

However, shiki is not a direct dependency of your project then there would be more steps to add your own theme 😥

An easier way to do this is to import the json and pass it to shikiConfig.theme

import { defineConfig } from 'astro/config';
import customTheme from './src/custom-themes/dracula.json';

export default defineConfig({
  site: 'https://example.com',
  markdown: {
    shikiConfig: {
      theme: customTheme,
    },
  },
});

Hope this helps 😇

Oh btw here is the stackblitz

Hi!! I tryed this with a custom theme. The thing is when I change anything on the astro.config.mjs I don't see any changes at all. Even if I use this shikiConfig: { theme: 'dracula' }. IT won't work so when I use my customThem like this shikiConfig: { theme: customTheme } it doesn't work either.

Any thoughts why it doesn't work??

thanks a lot!!

[delucis]

Hey @Ivluengo! Little bit hard to see without seeing more of your project. If this isn’t working, the best would be to create a bug report with a reproduction in the astro repo so we can look at fixing it: https://github.com/withastro/astro/issues/new/choose

Alternatively, we have a really active #support channel in the Astro Discord server which is a great place to share code examples and troubleshoot — https://astro.build/chat