search

marp-team / marp-core

The core of Marp converter
MIT License
766 stars 129 forks source link

CSS for highlight.js are not picked up since v3.1.1 #304

Closed mil-ad closed 2 years ago

mil-ad commented 2 years ago

Version of Marp Tool

3.2

Operating System

Linux

Environment

How to reproduce

I just noticed my custom CSS for highlight.js (copied from here) have stopped working since v.3.1.1

This is probably due to highlight.js dependency getting upgraded to latest versions? I did a bit of searching and didn't come across any breaking changes in recent versions of highlightjs so is it possible there's a problem on Marp's side?

Expected behavior

image

Actual behavior

image

Additional information

No response

yhatt commented 2 years ago

This is probably due to highlight.js dependency getting upgraded to latest versions?

Yes. Marp Core v3.x has included major update of highlight.js v10 -> v11. The base16 themes have actually moved to new locations so you should follow up the latest change at new location. https://github.com/highlightjs/highlight.js/tree/main/src/styles/base16

  • All Base16 themes now live in the styles/base16 directory - this means some CSS files have moved. Please confirm themes you use reference the new locations.

_— https://github.com/highlightjs/highlight.js/blob/main/VERSION_11_UPGRADE.md#styles-and-css_

mil-ad commented 2 years ago

Thanks those were super helpful pointers. I grabbed the latest style files but still see the same issue. However, I noticed if I add !important to everything in the style file things begin to work fine. 🤔

yhatt commented 2 years ago

https://github.com/marp-team/marp-core/blob/abc4e2edfae297ba16525270205dcdba161d38f9/themes/default.scss#L62-L76 In the current default theme, most selectors for highlight.js have become the narrowed shape pre .hljs-xxxxxx after compiled to CSS, to avoid collision with user-defined class in Markdown. These have 0-1-1 CSS specificity.

Selectors for highlight also may be required 0-1-1 and higher specificity to overload. pre .hljs-xxxx instead of .hljs-xxxx.

mil-ad commented 2 years ago

You're absolutely right. That fixed it.

You sir are on top of your stuff. 💪🏼

yhatt commented 2 years ago

Update in v3.2.1: Allowed overloading default styles by a simple class definition .hljs-xxxx again. The pre element scoping is no longer required as same as v2.x.

Thank you for your feedback!