enable shiki theme for a new blank theme

[gureckis]

I'm starting with a new blank theme (choosing Custom Theme) from npx VitePress init. I've noticed that the resulting source seems to parse and markup code blocks using shiki variables (e.g., class='shiki' appears in the HTML). but I'm not clear how to add in the styles from shiki themes for a new custom theme (it currently renders as blank <pre> code). is there something you add to index.js/ts for the theme?

[brc-dd]

You need to add CSS:

.dark .vp-code span {
  color: var(--shiki-dark, inherit);
}

html:not(.dark) .vp-code span {
  color: var(--shiki-light, inherit);
}

.dark div[class*='language-'] {
  background: black;
}

[gureckis]

I see, thanks... it's still quite minimal. I'm curious if there is a way to import things like the working buttons for copy/paste on code blocks from the default theme or the ability to highlight lines? for example can you import the markdown plugins internal to VitePress into a new theme (specifically src/node/markdown/plugins/highlight.ts and src/node/markdown/plugins/highlightLines.ts)? e.g.,something like import { highlight } from 'vitepress/plugins/highlight' and then can register it as a custom markdown plugin in defineConfig?

[gureckis]

nevermind -- I see that the highlightLines feature still works without being explicitly imported as a markdown plugin even in a new/"blank" theme. however, I'm not clear on where the behavior and style of code blocks in the default theme is coming from for the copy-paste buttons, etc..

[gureckis]

just to be more clear, even with the CSS provided above things look like this for the default .md files in a new project (so the CSS color stuff is applying but other elements like rendering buttons is not picked up)

[brc-dd]

Button is there (that box near language) and it should work in blank theme too. You just need to style it. Markdown plugins are loaded regardless of the theme.

div[class*='language-'] {
  position: relative;
}

div[class*='language-'] > button {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E")
    no-repeat;
  height: 1.5em;
  width: 1.5em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
}

[gureckis]

thanks this is very helpful!

[cheekyshibe]

My solution:

Copy all files in theme-default/styles to our custom theme's styles folder.

Add a CSS file like index.css to import them (note that font.css is not necessary`):

@import './vars.css';
@import './base.css';
@import './icons.css';
@import './utils.css';
@import './components/custom-block.css';
@import './components/vp-code.css';
@import './components/vp-code-group.css';
@import './components/vp-doc.css';
@import './components/vp-sponsor.css';

@import "./custom.css";

custom.css is our custom CSS file to overload some default setting.

And the key point is removing all .vp-doc selector tag in vp-doc.css file.

Wow. Every thing works as expected~