https://github.com/loopmode/bulma-prism
Workaround for using bulma and prism together
https://github.com/loopmode/bulma-prism
Last synced: 4 months ago
JSON representation
Workaround for using bulma and prism together
- Host: GitHub
- URL: https://github.com/loopmode/bulma-prism
- Owner: loopmode
- Created: 2020-11-18T13:20:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-16T18:19:43.000Z (about 5 years ago)
- Last Synced: 2025-01-08T16:26:27.019Z (about 1 year ago)
- Language: Sass
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bulma and Prismjs
This is a workaround solution for using both [bulma](https://github.com/jgthms/bulma) and [prism](https://github.com/PrismJS/prism) stylesheets.
There are collisions in global selectors between the two libraries, see https://github.com/jgthms/bulma/issues/1708 and https://github.com/PrismJS/prism/issues/1324
## Variant A: Configuring prismjs
You can simply change the prism classes for the two problematic cases:
```javascript
import Prism from "prismjs";
import "prismjs/plugins/custom-class/prism-custom-class";
Prism.plugins.customClass.map({ number: "prism-number", tag: "prism-tag" });
```
This is the simpler, recommended workaround.
## Variant B: Overriding Bulma in sass/scss
This is a patch over the sass version of bulma. It's only available when you use the npm package.
Use the bulma folder of this repo.
It changes two selectors:
- `.number` becomes `.number:not(.token)`
- `tag:not(body)` becomes `tag:not(body):not(.token)`
### Usage
Copy this folder to your project and import bulma from there.
Instead of this:
```scss
@import "~bulma/bulma.sass";
```
You do something like this:
```scss
@import "./bulma/bulma.sass";
```