PrismJS syntax highlighting is broken due to conflicts with Bulma

Question

PrismJS syntax highlighting is broken when used together with Bulma.

Both PrismJS and Bulma use the number and tag classes. So, there is a conflict between PrismJS and Bulma.

Are there any workarounds?

Answer 1

There are at least 2 workarounds.

Workaround #1

PrismJS adds token class to all highlighted elements including number and tag unlike Bulma. It allows us to write a more specific CSS rule and resolve conflict with Bulma:

.token.number,
.token.tag {
  all: inherit;
  color: #905;
}

Just specify the correct color used in your chosen PrismJS theme.

Workaround #2

Use Custom Class Prism plugin.

It allows to prefix all Prism classes (e.g., with prism- prefix).

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/custom-class/prism-custom-class.min.js"></script>
<script>
  Prism.plugins.customClass.prefix('prism-');
</script>

So number and tag become prism-number and prism-tag so the conflict with Bulma will be resolved.

But you also have to manually prefix classes in Prism CSS style-sheet, e.g.:

...    

.prism-token.prism-class-name,
.prism-token.prism-function {
    color: #dd4a68
}

...

I don't like this approach due to the need to manually edit Prism theme CSS file and then hosting it yourself.

Answer 2

Like Eugene Khyst mentioned in his answer, one way to do it is to use the Custom Class plugin for prismjs. Instead of renaming every prism class you can selectively rename some of the classes. Which should be easier to maintain.

Prism.plugins.customClass.map({
    number: 'prism-number',
    tag: 'prism-tag'
});

This will rename only the number and tag classes.