Issue with syntax highlighting.

[Boarders]

Hi I love this theme, thank you for making it. I can't seem to figure out how to get better syntax highlighting.

I have the following in my config file:

  pygmentsuseclasses = true
  pygmentsCoeFences = true
  highlight = true
  highlight_languages = ["haskell"]
  highlight_style = "monokai"

If I then have a block of Haskell as follows:

data Tree (f :: k -> Type) (a :: k) :: Type where
  Branch :: a -> f (Tree f a) -> Tree f a

tree :: Tree [] Int
tree = Branch 3 [Branch 1 [], Branch 2 []]

Then this is rendered as: I am probably being silly but could you explain how I could get better syntax highlighting than this?

[panr]

Theme uses my own custom highlighting (based on PrismJS). If you want to use Chroma highlighter built-in in Hugo, wrap your code in {{< highlight haskel >}} https://gohugo.io/content-management/syntax-highlighting

[Nequo]

@panr I want to add support for elisp in the syntax highlighting. This is supported by prism but not by this theme and I was wondering if you could point me in the right direction. Many thanks!

[tallamjr]

Do you know if it is possible to use my own version from PrismJS?

I am trying to use a certain style of syntax highlighting but I think what is happening is that my static/style.css is consistently being overridden by static/assets/style.css because of name clashes for items such as language-python etc

Unfortunately I am very rusty on css and order of precedence, so I'm quick stuck at the moment. Perhaps you can shed light on whether this is even possible? Thanks

[Boarders]

I would also love some pointers on adding my own custom syntax highlighting (at least where to get started). That would be really helpful!

[IvanTurgenev]

@panr I want to add support for elisp in the syntax highlighting. This is supported by prism but not by this theme and I was wondering if you could point me in the right direction. Many thanks!

i was wondering why emacs lisp was not working

[gadimbaylisahil]

You can do it easily in few steps

1. Go to PrismJs Asset Creator Page.

2. Configure the JS and CSS bundle based on your needs and download it.

3. Go to themes/terminal and run npm install npm install yarn yarn yarn build

4. Replace PrismJs with the one you just downloaded on step 1 and run yarn

5. Paste your PrismJS CSS file you downloaded in step 1 to assets/style.css

6. Voila!

[panr]

Replace PrismJs with the one you just downloaded on step 1 and run yarn

You should run yarn dev / yarn build to recompile whole code. yarn just installs dependencies ;-)

[gadimbaylisahil]

Replace PrismJs with the one you just downloaded on step 1 and run yarn

You should run yarn dev / yarn build to recompile whole code. yarn just installs dependencies ;-)

Edited

[Boarders]

Following the above steps I do not pick up whatever theme I pick for code highlighting e.g. after downloading with this theme: https://prismjs.com/index.html?theme=prism-solarizedlight my file looks like this:

Any ideas what I am doing wrong here?

[Boarders]

You can do it easily in few steps

1. Go to [PrismJs Asset Creator Page](https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+docker+elixir+elm+erb+erlang+git+haml+haskell+markup-templating+puppet+ruby+shell-session+toml+yaml).

2. Configure the JS and CSS bundle based on your needs and download it.

3. Go to `themes/terminal` and run `npm install` `npm install yarn` `yarn` `yarn build`

4. Replace PrismJs with the one you just downloaded on step 1 and run `yarn`

5. Paste your PrismJS CSS file you downloaded in step 1 to `assets/style.css`

6. Voila!

@gadimbaylisahil I have tried several variants on this and I simply can't figure out what you did to get it to work. Do I need to remove any files and where exactly to I put my own custom css file? I tried assets/style.css', I tried replacing the existing 'prism.css' , I tried putting it instatic/style.css'. If you have any ideas to clarify how to get it to work I would greatly appreciate it.

[panr]

Does it work if you replace prism.css in the theme folder and then run yarn build or yarn dev? This should work.

[Boarders]

Do you mean I should leave all other css files you already have and only add prism.css to assets/css/prism.css?

[panr]

I think so, because why would you delete all other CSS files 😬? I recollect that I've made so many changes to have my own custom highlighting that I'm not 100% sure if this will work as expected...

[Boarders]

Could anyone try on their version simply replacing prism.css and seeing if that has any effect. For me it does the same thing as having no prism.css file and looks as follows:

I don't really understand how it can be so hard to swap out the css for syntax highlighting.