Source Code Highlighting

[Keith99]

Hi, I am new to WYSIWYG but been exploring it extensively and it seems excellent so far! I have used a number of different editors in the past.

My only issue is that there appears to be no way of adding a <code> tag and the html object does not quite do the job. Let me explain:

I run a website where I need to have blocks of C++ code. Normally the <pre> and <code> tags work quite well but they do not do syntax highlighting. However there are a few .js scripts available to do it for you, so what I have done:

- Created a Master Page with a file publisher object where I specify the JavaScript files I need plus run a function to parse the code (I am using highlight.js)

- Added an HTML object to a page with <pre><code> before my source code sample and </code></pre> afterwards.

When I preview the above it works well with the code highlighting correctly with Visual Studio colouring - perfect!

So now the next step was to create a resuable method that I could quickly call upon when writing pages e.g. I just want to insert a bit of code at a point. So I created a block from my HTML and can reuse it quite easily BUT here is where the issue is:

The HTML object has a set size to it and this does not correspond to the size of the actual text (the source code). So subsequent page elements can write over the top of the source code text. This is a real pain as for each bit of source code I add I have to manually size the html object to what I should think it is and then keep tweaking it until it is right, a real PITA. The HTML box gives the option to use a div tag for positioning and various other options but none work - what I really need is one that just allows me to insert the html in the position I specify and let the normal htrml flow sort out the positioning however I am away WYSIWG does not work that way.

So I wondered if there is anything else I could try?

[Pablo]

Maybe you can create an extension for it, so you can reuse your code more easily?
https://www.wysiwygwebbuilder.com/exten ... ilder.html

[Keith99]

Actually I saw that and downloaded the tool thinking that may work but have not investigated it very deeply. I have found I can nearly get there using pre and post tags on a text item as long as I insert two extra breaks at the end - not ideal but may work as a stand in until I can work on an extension. I guess the extension reports its size? It is the y size that is the key to getting this to work

[Pablo]

In an extension you can either use the container's size (using div). Or include the width via $WIDTH$ and $HEIGHT$ variables.

[Keith99]

Thanks I may do that later when I get a chance but meantime I have it working well using a different method that means I do not need to use blocks but can simply set a text style.

I discovered that highlight.js has ways to configure it to detect different tags to <pre><code>. This has allowed me to just use a custom style to mark code as being source code (needs white-space:pre CSS setting). It also seems to sort the height problems as well! For anyone else who is looking for a way to do this and found this post these are the steps:

1. Download the highlight.js code
2. Create a master document and add a FilePublisher object. Include the highlight.pack.js and the styles folder from the downloaded code
3. Add an HTML object to the master document with the following:

<link rel="stylesheet" href="styles/vs.css">
<script src="highlight.pack.js"></script>
<script> document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('span.KDCode').forEach((block) => {
hljs.highlightBlock(block);
});
});</script>

Note: I am using KDCode as my class name and have specified vs formatting but you can use anything you want of course for the name and default instead of vs

4. Create a new text style called KDCode and in the custom style box insert: white-space: pre;

And thats it - it works well. The only issue I have found is using C++ // comments can cause all subsequent text to be considered a comment by the parser, this is due to the generated html placing all the text on one line. No easy way around that apart from using /* */ comments instead which is no big issue.

Keith

[Pablo]

Thanks for sharing your solution!