search

still-ex / still

A composable Elixir static site generator
https://stillstatic.io
ISC License
252 stars 10 forks source link

Syntax highlight in code blocks #114

Open gabrielpoca opened 3 years ago

gabrielpoca commented 3 years ago

We need to decide what to recommend to folks that need syntax highlight in code blocks. At the moment, I can think of three solutions:

  1. The simplest solution is to use a browser plugin such as https://prismjs.com/. This is probably the best one as well.
  2. We can also set up NodeJS and run our code to prismjs on the server. We need to create some examples showing how to integrate with NodeJS. It's pretty easy using elixir-nodejs.
  3. Use an Elixir package like Makeup. This package can be used easily through a view helper (example). Or we can look into the markdown to HTML renderer and try to some plugin/patch to run some code blocks through Makeup. Still, the issue with this solution is that at the moment, only try languages are supported.
gabrielpoca commented 3 years ago

Here's an example using NodeJS. I would rather hook it up with the markdown to HTML renderer, but we don't have that option yet.

michaeldelago commented 2 years ago

Option 1 - I think this is the most ideal solution. - to use either prismjs or highlightjs. The majority of the work is already done, and it's as simple as including a js file and classing code blocks in the page templates.

Option 2 - While I'm not a fan of having an extra language runtime as a dependency to solve a single problem, this does definitely solve the problem.

Option 3 - The only downside here is that Makeup only supports Elixir, Erlang, and C; that's a pretty large downside in my opinion, compared to the previous 2 options.

I like Option 2 and 3's idea of generating the html with the code highlighting built in, but i think Option 1 is the simplest and easiest to recommend.

frm commented 2 years ago

This is a tricky one. We're binding to hoedown via @still-ex/markdown. Ideally, we'd support that within the markdown parser but I don't think we have the bandwidth right now to do it ourselves (and I doubt hoedown is going to get updated).

A few options:

  1. Change the markdown renderer - not too comfortable with this, we decided to go with that one and maintain it since it matched our use case.
  2. Plug something afterwards that adds syntax highlighting to HTML.

To go with option 2, I'd steer away from adding PrismJS or HighlightJS and introduce node as a dependency but much rather do it completely in Elixir. The reasoning for this is almost exclusively developer experience with a few points for not wanting to maintain Node on this project. That being said, we don't have Elixir alternatives so I don't think we should leave this hanging. I think my preference is:

  1. Plug something after our markdown renderer to do syntax highlighting.
  2. Use either NodeJS or a Rust package and bind it via a Rust NIF (I'd prefer the latter but I don't know if it exists)
  3. Ship that version.
  4. Write down as one of our TODOs a syntax highlighter using Elixir (which, if we're honest, we'd never to with our current bandwidth).
gabrielpoca commented 2 years ago

We really don't want to add Node as a dependency to the project. I think we can close this issue; people can go with option 1 or 2. Option 3 doesn't really exist.