search

softrams / bulwark

An organizational asset and vulnerability management tool, with Jira integration, designed for generating application security reports.
MIT License
180 stars 37 forks source link

Implement Syntax Highlighting for Markdown Support #767

Closed alejandrosaenz117 closed 1 year ago

alejandrosaenz117 commented 3 years ago

Is your feature request related to a problem? Please describe. Syntax highlighting should be available so that the markdown renders source code accurately based on programming language

Describe the solution you'd like https://github.com/jfcere/ngx-markdown#syntax-highlight

noraj commented 3 years ago

ngx-markdown uses Marked as markdown render which is not compatible with commonmark standard. A parser like markdown-it would be better (see awesome Markdown libraries.

Also ngx-markdown use Prism.js for syntax highlight, which is not bad and even a bit quicker than Highlight.js but that supports less languages and less themes. However the good thing with prism is the plugin system for example for line highlight or line numbers.

But about Syntax Highlighting it's nice to have it client-side but what about Syntax Highlighting during report generation? Because being able to get it in the final report (PDF) is as important if not more.

alejandrosaenz117 commented 3 years ago

Thanks, @noraj! I'll check out the resource you linked. The main concern I have with ngx-markdown is that you manually have to import the syntax highlighting per language. Therefore, we would have to import only the more popular languages with README instructions showing how to add languages other than the defaults we provided. Or we do not provide syntax highlighting out of the box and instead have instructions on how to enable it by updating the angular.json.

But about Syntax Highlighting it's nice to have it client-side but what about Syntax Highlighting during report generation? Because being able to get it in the final report (PDF) is as important if not more.

I tested this out using Prism.js and confirmed that Puppeteer renders the report with partial syntax highlighting. Albeit, with a light background instead of a dark background. Here's a Java example:

Image from iOS

noraj commented 3 years ago

The main concern I have with ngx-markdown is that you manually have to import the syntax highlighting per language. Therefore, we would have to import only the more popular languages with README instructions showing how to add languages other than the defaults we provided. Or we do not provide syntax highlighting out of the box and instead have instructions on how to enable it by updating the angular.json.

I know that with Highlight.js you have only one script to embed, you can include all languages, include only common ones or include a custom list cf. https://highlightjs.org/download/ and https://highlightjs.org/usage/. I don't know Pirsm.js well. The only usage I've seen is in Docsify and it was teh same you were forced to import one module per language.