Feature: Add syntax highlighting support for non-executable snippets

[maptoan]

Problem

The current implementation of processSnippetHtml only applies syntax highlighting classes to snippets that have specific execution tags. This leaves static code blocks unstyled. I will modify the function to ensure that all code snippets, including those that are purely illustrative, are wrapped in the <pre class="prettyprint"> tag (or equivalent) so that the CSS can apply syntax highlighting.

Severity: medium
File: javascript/processingFunctions/processSnippetHtml.js

Solution

The current implementation of processSnippetHtml only applies syntax highlighting classes to snippets that have specific execution tags. This leaves static code blocks unstyled. I will modify the function to ensure that all code snippets, including those that are purely illustrative, are wrapped in the <pre class="prettyprint"> tag (or equivalent) so that the CSS can apply syntax highlighting.

Changes

• javascript/processingFunctions/processSnippetHtml.js (modified)

Testing

• Existing tests pass
• Manual review completed
• No new warnings/errors introduced

Closes #757

[gemini-code-assist]

Code Review

This pull request updates the CSS class name for JavaScript snippets from 'prettyprintoutput' to 'prettyprint' to ensure consistent styling. A review comment suggests refactoring the repeated logic for handling different snippet tags into a single loop to reduce code duplication and improve maintainability.

[gemini-code-assist]

While your change is functionally correct, there's an opportunity to refactor the code to reduce duplication. The logic for handling JAVASCRIPT_PROMPT and JAVASCRIPT_LONELY is identical. You can combine them into a loop to make the code more concise and maintainable.

Suggested change

	const jsPromptSnippet = node.getElementsByTagName("JAVASCRIPT_PROMPT")[0];
	if (jsPromptSnippet) {
	writeTo.push("<pre class='prettyprintoutput'>");
	writeTo.push("<pre class='prettyprint'>");
	writeTo.push(jsPromptSnippet.firstChild.nodeValue.trimRight());
	writeTo.push("</pre>");
	}
	const jsLonelySnippet = node.getElementsByTagName("JAVASCRIPT_LONELY")[0];
	if (jsLonelySnippet) {
	writeTo.push("<pre class='prettyprintoutput'>");
	writeTo.push("<pre class='prettyprint'>");
	writeTo.push(jsLonelySnippet.firstChild.nodeValue.trimRight());
	writeTo.push("</pre>");
	}
	["JAVASCRIPT_PROMPT", "JAVASCRIPT_LONELY"].forEach(tagName => {
	const snippet = node.getElementsByTagName(tagName)[0];
	if (snippet) {
	writeTo.push("<pre class='prettyprint'>");
	writeTo.push(snippet.firstChild.nodeValue.trimRight());
	writeTo.push("</pre>");
	}
	});