# Pollen with Pygments or Highlights.js? **URL:** \ **Category:** General\ **Tags:** question, pollen\ **Created:** [March 10, 2023, 11:10pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773 "2023-03-10T23:10:39Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 10, 2023, 11:10pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/1 "2023-03-10T23:10:39Z")
I'm having a heck of a time getting Pygments or Highlights to furnish syntax coloring in my pollen documents. I followed the tutorial ([9 Mini tutorials](https://docs.racket-lang.org/pollen/mini-tutorial.html)). I got Pygments to color the code, but the CSS styles that I copied into my `template.html.p` don't seem to affect the colors! I need to change them because I am using a dark background. I got Highlights to render the code, but there are no colors! The cited example from Matthew Butterick ([unitscale.com](http://unitscale.com/mb/technique/styles.css.pp.html)) is a dead link. Google searching did not reveal a copy (perhaps I should try the Wayback Machine). I'd be grateful for a working example of either approach! ---
**Author:** ![haglobah](https://avatars.discourse-cdn.com/v4/letter/h/b782af/32.png) [@haglobah](https://racket.discourse.group/u/haglobah)\ **Post date:** [March 11, 2023, 12:39pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/2 "2023-03-11T12:39:36Z")
I just very recently switched from Pygments to Highlight.js in this project: > **[GitHub - haglobah/Mastering-42: less pain, more gain.](https://github.com/haglobah/Mastering-42)** > > less pain, more gain. Contribute to haglobah/Mastering-42 development by creating an account on GitHub. (Results: [Mastering 42](https://haglobah.github.io/Mastering-42/index.html)) Hope you find what you need in there 🙂 ---
**Author:** ![joeld](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/joeld/32/38_2.png) [@joeld](https://racket.discourse.group/u/joeld)\ **Post date:** [March 11, 2023, 2:26pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/3 "2023-03-11T14:26:20Z")
> [@rebcabin](#): > > I got Highlights to render the code, but there are no colors! What does your rendered code look like? Can you post an excerpt (either HTML or X-expressions)? ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 11, 2023, 11:29pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/4 "2023-03-11T23:29:48Z")
@joeld thanks for your kind attention! **DISCLAIMER** : I admit this is my first and non-fancy attempt at a `pollen` document. I am operating on guesswork from a thin reading of the documentation and a gaseous, even nebulous, understanding of both `html` and `pollen`. I would not blame you if you ignored me as a hopeless dunce! OTOH, my early success with the `tufte` CSS encouraged me to plow-on semi-blindly! Also, I must break this up into multiple posts due to restrictions on new users (like me) from the web-site. Please forgive me! Here is post 1 of 3: ## Attempt #1 at highlighting: ## input ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/6014f60716d7e43414ae7785795969b0a30de510.png) ## output ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/4/418338b28b701f6dd3f38698fd4e744d46c14607.png) # `template.html.p` Here is my template file: ```scheme The Little Typer â—Š(->html doc) ``` ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 11, 2023, 11:30pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/5 "2023-03-11T23:30:40Z")
Post 2 of 3: # Before attempting highlights ## input snippet from `playground.html.pmd`: ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/a/a92c8a49f0879668f8f443dedbec56f42d578169.png) ## output in `playground.html`: ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/6f55b6c2372968f6966ac5b0534966c201c89464.png) ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 11, 2023, 11:31pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/6 "2023-03-11T23:31:31Z")
Post 3 of 3: ## Attempt #2 at highlighting: ## input ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/6/6600a8d90112d64d10be09809b0cc5b969c0b124.png) ## output ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/a/a95aee7dc064a88cecae9ab2b9aae311836e126e.png) ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 11, 2023, 11:33pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/7 "2023-03-11T23:33:01Z")
@haglobah thanks! I borrowed your `link` tag and reference to the `night-owl` style! ---
**Author:** ![joeld](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/joeld/32/38_2.png) [@joeld](https://racket.discourse.group/u/joeld)\ **Post date:** [March 12, 2023, 1:47am UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/8 "2023-03-12T01:47:17Z")
I suspect you are using `#lang pollen/markdown` — is that the case? ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 12, 2023, 4:44am UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/9 "2023-03-12T04:44:32Z")
I think so ... it's a `.pmd` file, but I say just `#lang pollen` at the top . Here is the top of the file ````scheme #lang pollen ```racket #lang pie ;; Racket supports this language as a ;; package (`raco pkg install pie`) ```` â—Š(define ( . xs) `(mathjax ,(apply string-append `("" ,@xs "$")))) â—Š(define ($$ . xs) `(mathjax ,(apply string-append `("$$" ,@xs "$$")))) â—Š(require pollen/unstable/pygments) > I wonder whether {2^{\aleph\_\alpha} = \aleph\_{\alpha+1}}? -- Matthew Butterick # Prolegomenon I am Brian Beckman. These are my notes on [_The Little Typer_](https://thelittletyper.com/index.html), Fifth Printing. [Find the source of my notes here](won't let me post a link). ```scheme ``` ---
**Author:** ![joeld](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/joeld/32/38_2.png) [@joeld](https://racket.discourse.group/u/joeld)\ **Post date:** [March 12, 2023, 2:24pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/10 "2023-03-12T14:24:34Z")
Yes, a `#lang pollen` file with a `.pmd` extension is equivalent to `#lang pollen/markdown`. I think you’re on the right track with your second attempt. When using `pollen\markdown`, the results of any embedded Racket expressions get converted to strings before the document is parsed as Markdown. So in order to be really useful, any such expressions need to produce strings of Markdown—or HTML, which is valid Markdown. The error from your second attempt stems from a small syntax error: in line 152 of your excerpt, there should be no space between `['scheme]` and `{`, so the line should read: ```scheme ◊(->html ◊highlight['scheme]{ ``` Pollen command syntax (which follows [@ Syntax](https://docs.racket-lang.org/scribble/reader.html) in every respect except that it uses `◊` by default instead of `@`) requires that there be no whitespace between the `[`_datum_`]` portion of the command and the `{`_text-body_`}` portion. Maybe you knew this already and it was a simple typo. When I started with Pollen (which was my introduction to Racket), I was thinking of the curly braces as simple grouping operators that could be placed anywhere (as in C programming, for example), and ran into similar issues. ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 12, 2023, 3:29pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/11 "2023-03-12T15:29:36Z")
I didn't know about this syntax requirement! tyvm! My fingers automatically type a space before a curly from many decades of C programming 🙂 ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 12, 2023, 3:35pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/12 "2023-03-12T15:35:56Z")
this is getting much closer, now. Looks like the X-expression is well-formed, just not converting to HTML yet. ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/8/8944b0da4d081fe2116a170e25e5bca8d1bcffda.png) ```scheme ’(->html (div ((class “highlight”)) (table ((class “sourcetable”)) (tbody (tr (td ((class “linenos”)) (div ((class “linenodiv”)) (pre (span ((class “normal”)) " 1") "\n" (span ((class “normal”)) " 2") "\n" (span ((class “normal”)) " 3") "\n" (span ((class “normal”)) " 4") "\n" (span ((class “normal”)) " 5") "\n" (span ((class “normal”)) " 6") "\n" (span ((class “normal”)) " 7") "\n" (span ((class “normal”)) " 8") "\n" (span ((class “normal”)) " 9") "\n" (span ((class “normal”)) “10”)))) (td ((class “code”)) (div ((class “source”)) (pre (span) (span ((class “p”)) "(") (span ((class “nf”)) “claim”) " " (span ((class “nv”)) “wN”) "\n " (span ((class “p”)) "(") (span ((class “nf”)) “Π”) " " (span ((class “p”)) "((") (span ((class “nf”)) “E”) " " (span ((class “nv”)) “U”) " " (span ((class “p”)) ")") "\n " (span ((class “p”)) "(") (span ((class “nf”)) “target”) " " (span ((class “nv”)) “Nat”) " " (span ((class “p”)) ")") "\n " (span ((class “p”)) "(") (span ((class “nf”)) “base”) " " (span ((class “nv”)) “E”) " " (span ((class “p”)) ")") "\n " (span ((class “p”)) "(") (span ((class “nf”)) “step”) " " (span ((class “p”)) "(") (span ((class “err”)) "→") " " (span ((class “nv”)) “Nat”) " " (span ((class “nv”)) “E”) (span ((class “p”)) ")))") "\n " (span ((class “nv”)) “E”) (span ((class “p”)) "))") "\n\n" (span ((class “p”)) "(") (span ((class “k”)) “define ”) (span ((class “nv”)) “wN”) "\n " (span ((class “p”)) "(") (span ((class “nf”)) “λ”) " " (span ((class “p”)) "(") (span ((class “nf”)) “E”) (span ((class “p”)) ")") "\n " (span ((class “p”)) "(") (span ((class “nf”)) “λ”) " " (span ((class “p”)) "(") (span ((class “nf”)) “t”) " " (span ((class “nv”)) “b”) " " (span ((class “nv”)) “s”) (span ((class “p”)) ")") " " (span ((class “p”)) "(") (span ((class “nf”)) “which-Nat”) " " (span ((class “nv”)) “t”) " " (span ((class “nv”)) “b”) " " (span ((class “nv”)) “s”) (span ((class “p”)) "))))") "\n")) "\n")))) "\n")) ``` ---
**Author:** ![joeld](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/joeld/32/38_2.png) [@joeld](https://racket.discourse.group/u/joeld)\ **Post date:** [March 12, 2023, 3:54pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/13 "2023-03-12T15:54:23Z")
Now it appears that the `->html` from `pollen/template` is not visible within your pollen source file, so in that file `->html` is not bound to any value. In normal Racket this would cause an error, but Pollen [intervenes](https://docs.racket-lang.org/pollen/Top.html) to convert the failed function call into a simple X-expression. So, try adding `◊(require pollen/template)` to your `.pmd` file to see if that fixes it. (This is [the module](https://docs.racket-lang.org/pollen/Template.html) that provides Pollen’s `->html` function.) ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 13, 2023, 7:13pm UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/14 "2023-03-13T19:13:35Z")
VICTORY! (thanks very much!) ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/2X/7/7979520110cafbffc186abfc6933524e9d4e830c.png) ---
**Author:** ![joeld](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/joeld/32/38_2.png) [@joeld](https://racket.discourse.group/u/joeld)\ **Post date:** [March 14, 2023, 2:06am UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/15 "2023-03-14T02:06:23Z")
Excellent! To tie a neat little bow on this: save the following function into a `pollen.rkt` file in your project’s root folder: ```scheme (require pollen/template pollen/unstable/pygments) (provide racketcode) (define (racketcode . strs) (->html (apply highlight 'scheme strs))) ``` Because bindings in a nearby `pollen.rkt` are automatically imported to your Pollen file, you can use this `racketcode` function, and you won’t have to `(require pollen/template)` in your documents: ```plaintext #lang pollen Here is an example function with syntax highlighting: ◊racketcode{ (define (hello name) (format "Hello, ~a" name)) } ``` ---
**Author:** ![rebcabin](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/rebcabin/32/1009_2.png) [@rebcabin](https://racket.discourse.group/u/rebcabin)\ **Post date:** [March 14, 2023, 4:55am UTC](https://racket.discourse.group/t/pollen-with-pygments-or-highlights-js/1773/16 "2023-03-14T04:55:39Z")
Great! will do! Muchas Gracias 🙂