Skip to content
This repository has been archived by the owner on Jul 6, 2023. It is now read-only.

Syntax highlight in code blocks #114

Open
gabrielpoca opened this issue Feb 12, 2021 · 4 comments
Open

Syntax highlight in code blocks #114

gabrielpoca opened this issue Feb 12, 2021 · 4 comments
Labels
question Further information is requested

Comments

@gabrielpoca
Copy link
Member

gabrielpoca commented Feb 12, 2021

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 gabrielpoca added the question Further information is requested label Feb 12, 2021
@gabrielpoca
Copy link
Member Author

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
Copy link
Contributor

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
Copy link
Member

frm commented Jan 27, 2022

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
Copy link
Member Author

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants