Skip to content

Is there any possibility to change the prism.js theme? #736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
santigarcor opened this issue Aug 15, 2018 · 7 comments
Closed

Is there any possibility to change the prism.js theme? #736

santigarcor opened this issue Aug 15, 2018 · 7 comments

Comments

@santigarcor
Copy link

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

@ulivz ulivz added the question label Aug 15, 2018
@ulivz
Copy link
Member

ulivz commented Aug 15, 2018

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

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

@ulivz ulivz closed this as completed Aug 15, 2018
@johnrengelman
Copy link

johnrengelman commented Aug 23, 2018

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

image

@hakuoku
Copy link

hakuoku commented Jan 27, 2019

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

@darrenjennings
Copy link

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
Copy link

avivace commented Jan 26, 2020

Any update on this?

@darrenjennings
Copy link

@avivace
Copy link

avivace commented Jan 26, 2020

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

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants