Allow highlighting in code samples

[ArgentEnergy]

We use code samples (have a specific Word styling for code samples) for HTTP requests and one of the pain points we have is GW doesn't offer the ability to highlight text inside them. The mark HTML tag is stripped if manually adding into the source code under the code HTML tag. This looks to be a dependency issue relying on TinyMCE's code sample plugin that relies on Prism.js.

Is it possible to fix this issue with having a custom Prism.js file to not strip the mark tags? https://www.tiny.cloud/docs/plugins/opensource/codesample/#codesample_global_prismjs https://github.com/PrismJS/prism/issues/879

We have to manually do the highlighting in Word. This becomes tedious if you did the manual work already and a report change happens that makes us regenerate the report again.

[chrismaddalena]

Hey @ArgentEnergy, I will look into this. If TinyMCE can't do it, there might be an easy way to stop using the codesample plugin and create a custom HTML wrapper. Ghostwriter's reporting engine only cares about the <code></code> tags to know to switch to your code block style for the paragraph.

[ArgentEnergy]

Thank you @chrismaddalena! :)

This might be another issue but I noticed that code samples, bullet lists, numbered lists, and inline code aren't following the styling in Word. I checked my template and they all have font justified for the font styles but we have to manually do this after exporting. TinyMCE covers the font justify issue for most but not code samples and the lists (bullet or numbered).

I don't think it's my template but here's our format:

{%p if finding.affected_entities_rt %} 
{{p finding.affected_entities_rt }} 
{%p else %} 

{%p endif %}

We're on v3.2.6 right now and plan on moving to version 4 so I'm not sure if this was resolved in a future version yet.

[felix-caboff]

In a related note, web browsers that have dark-mode enabled struggle to render the highlighting that TinyMCE can apply to non-code elements. I'm not really sure why though - I would imagine that highlighting yellow would always result in it being yellow. If you look closely, you can see there is a slight shift from dark grey to slightly lighter grey, but not much of one.

[domwhewell-sage]

@ArgentEnergy did you find out how to highlight lines of code within the codesample plugin? I've got a work around at the moment where I can add multiple lines of inline code and it applies the "CodeBlock" style allowing us to highlight lines of code. But it would be nice if the codesample plugin and gw supported this.

[ArgentEnergy]

@domwhewell-sage No, right now we have to do it manually in the Word document until Ghostwriter supports it. Not sure of the ETA on this feature. You'll have to ask @chrismaddalena.

[chrismaddalena]

I haven't looked into yet. As mentioned above, we'll have to investigate what we can do with TinyMCE. We can't highlight or otherwise style code inside a code block today because it's all wrapped in pre tags by TinyMCE. There is no styling inside those tags. I expect we'll need to customize the code block to it looks the same but doesn't apply pre tags or use TinyMCE's source code input modal.

[github-actions[bot]]

This issue has been labeled as stale because it has been open for 30 days with no activity.