Pollen with Pygments or Highlights.js?

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). 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) 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!

1 Like

I just very recently switched from Pygments to Highlight.js in this project:

(Results: Mastering 42)

Hope you find what you need in there :slight_smile:

What does your rendered code look like? Can you post an excerpt (either HTML or X-expressions)?

@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

output

template.html.p

Here is my template file:

<html>
<head>
  <meta charset="UTF-8">
  <script type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>

  <script type="text/x-mathjax-config">
   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$']]}});
  </script>

  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js">
       </script> -->

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/night-owl.min.css">
  <link/>

  <!-- and it's easy to individually load additional languages -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/scheme.min.js">
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js">
  </script>

  <title>The Little Typer
  </title>

  <link rel="stylesheet" type="text/css" href="tufte.css">
  </link>

</head>
<body>◊(->html doc)</body>
</html>

Post 2 of 3:

Before attempting highlights

input snippet from playground.html.pmd:

output in playground.html:

Post 3 of 3:

Attempt #2 at highlighting:

input

output

@haglobah thanks! I borrowed your link tag and reference to the night-owl style!

I suspect you are using #lang pollen/markdown — is that the case?

I think so ... it's a .pmd file, but I say just #lang pollen at the top . Here is the top of the file

#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
,
Fifth Printing. [Find the source of my notes
here](won't let me post a link).

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:

◊(->html ◊highlight['scheme]{

Pollen command syntax (which follows @ Syntax 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.

1 Like

I didn't know about this syntax requirement! tyvm! My fingers automatically type a space before a curly from many decades of C programming :slight_smile:

this is getting much closer, now. Looks like the X-expression is well-formed, just not converting to HTML yet.

’(->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"))

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 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 that provides Pollen’s ->html function.)

2 Likes

VICTORY!

(thanks very much!)

Excellent!

To tie a neat little bow on this: save the following function into a pollen.rkt file in your project’s root folder:

(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:

#lang pollen

Here is an example function with syntax highlighting:

◊racketcode{
  (define (hello name)
    (format "Hello, ~a" name))
}
1 Like

Great! will do! Muchas Gracias :slight_smile: