Vuepress: Is there any possibility to change the prism.js theme?

[santigarcor]

I would like to know if is it possible to change the prism theme used to do the highlighting?

[ulivz]

Of course we can. e.g. Create a .vuepress/style.styl, and write:

@import "~prismjs/themes/prism-dark.css"

[johnrengelman]

It appears that not all of the prism styles can be used because they really on the default styling.
For example prism-coy doesn't work because it's styling falls through to code.styl

[hakuoku]

Where should I place prism theme css? When I place it project root and .vuepress/prismjs/themes "module not found" error occurred.

[darrenjennings]

For those who are wondering about how you might do it... If you use the vuepress default-theme, it will auto-import prism-coy theme. I am using a small hack to remove it from the Layout.vue file during build setup, and then importing a new theme css file in the index.styl file.

  "scripts": {
    "remove-prism": "sed -i.bak -e \":a\" -e 'N' -e '$!ba' -e \"s/<style src=\\\"prismjs.*css\\\"><\\/style>/ /\" node_modules/@vuepress/theme-default/layouts/Layout.vue",
    "docs:dev": "yarn remove-prism && vuepress dev docs",
    "docs:build": "yarn remove-prism && vuepress build docs"
  },

Would be nice to have a better way to change the theme.

[avivace]

Any update on this?

[darrenjennings]

@avivace it was fixed with https://github.com/vuejs/vuepress/pull/1707/files

[avivace]

@darrenjennings Got it. I was mixing this problem up with the styles "code.styl" is pushing on the default them.

Thanks.