Syntax Highlighting Code with JavaScript

Syntax highlighting code with Javascript

StackOverflow uses the Prettify library.

How do I make syntax highlighting for a specific language with code mirror

Just add the language in the configuration of your editor ;)
The mode parameter is what you're looking for I think.

Example from the official website for C++:

var cppEditor = CodeMirror.fromTextArea(document.getElementById("cpp-code"), {
    lineNumbers: true,
    matchBrackets: true,
    mode: "text/x-c++src"
});

Check the sources from this page for C++: http://codemirror.net/mode/clike/index.html

This page lists all the supported languages: http://codemirror.net/mode/index.html

Edit:

I must admit that their documentation is quite unclear to find what you want to in it.

Did you try to add this file to your webpage: http://codemirror.net/mode/clike/clike.js? I think this is mandatory, check the imports in the first page I mentionned above, you probably miss a module.

Textarea that can do syntax highlighting on the fly?

It's not possible to achieve the required level of control over presentation in a regular textarea.

If you're OK with that, try CodeMirror or Ace or Monaco (used in MS VSCode).

From the duplicate thread - an obligatory wikipedia link: Comparison of JavaScript-based source code editors

VSCode JavaScript syntax highlighting

It appears you want to disable the bracket pairs colorization.

Here's a blog post from the VSCode team, talking about this new highlighting feature introduced recently : https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization

To do so, set the following settings to false :

"editor.bracketPairColorization.enabled": false,
"editor.guides.bracketPairs": false,

Is it possible to have syntax highlighting for HTML/CSS/JS in textarea?

You cannot directly control syntax highlighting in a textarea. You can try JS libraries like http://www.cdolivet.com/editarea/ or if you just wnat to do it all by yourself, you can go for contenteditable .

Contenteditable is an html Attribute that enables textarea like editing in any element like div , span etc.

Although you will have to use a lot of javascript to interpret the language and highlight it accordingly.

<div contenteditable="true" style="width:100%;height:200px;border:1px solid #000"><b>This is bold text</b><br/><u>This is underlined text</u><br/>and so on..<br/><font color="#f00">class</font> <font color="#0f0">Sample</font><br/><em>{</em><br/></div>

How to have syntax highlighting of input text in Node.js REPL?

You can acheive this by overriding _writeToOutput method
The '\x1b[31m' is the console red color unicode
you need to add '\x1b[0m' is the reset,
it is necessary for the colors to stop at this position:

rl._writeToOutput = function _writeToOutput(stringToWrite) {
    rl.output.write('\x1b[31m'+stringToWrite+'\x1b[0m');
};

colors unicodes:

Black: \u001b[30m.
Red: \u001b[31m.
Green: \u001b[32m.
Yellow: \u001b[33m.
Blue: \u001b[34m.
Magenta: \u001b[35m.
Cyan: \u001b[36m.
White: \u001b[37m.

code example:

var readline = require('readline');

var rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question("code: ", function(code) {
  console.log('\ncode is ' + code);
  rl.close();
});

// force trigger of _writeToOutput on each keystroke
process.stdin.on('keypress', (c, k) => {
    // setTimeout is needed otherwise if you call console.log
    // it will include the prompt in the output
    setTimeout(() => {
        rl._refreshLine();
    }, 0);
});

rl._writeToOutput = function _writeToOutput(stringToWrite) {
    rl.output.write(stringToWrite.replace(/define/g, '\u001b[1;34mdefine\x1b[0m'));
};

type "define" to have it in blue.

VS Code syntax highlighting for XML containing javascript

You could turn the problem around. This XSLT template transforms your XML to JS code

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="text" />

    <xsl:template match="*[normalize-space(text()[1])]">
        <xsl:value-of select="concat('//xml:<', name(), '><![CDATA[')" />
        <xsl:apply-templates select="node() | *" />
        <xsl:value-of select="concat('//xml:]]></', name(), '>')" />
    </xsl:template>
    
    <xsl:template match="*">
        <xsl:value-of select="concat('//xml:<', name(), '>')" />
        <xsl:apply-templates select="node() | *" />
        <xsl:value-of select="concat('//xml:</', name(), '>')" />
    </xsl:template>
</xsl:stylesheet>

produces this:

//xml:<JS>
  //xml:<MY_FUNCTION><![CDATA[
// comment here
let my_function = () => console.log("Hello World");
  //xml:]]></MY_FUNCTION>
  //xml:<LESS_THAN><![CDATA[
let less_than = (a,b) => a < b;
  //xml:]]></LESS_THAN>
  //xml:<GREATER_THAN><![CDATA[
let greater_than = (a,b) => a > b;
  //xml:]]></GREATER_THAN>
//xml:</JS>

Now syntax highlighting can work according to JS rules.

Using XSLT is not strictly necessary, you could probably get away with a half-way clever regex replace, something like ^(\s*)(<|\]\]>) replaced with \1//xml:\2, assuming that XML tags always are on their own lines.

You can convert it all back to XML by removing the //xml: with a simple search and replace operation, as long as you leave the //xml: comments intact.

Doing that would put us back to:

<JS>
  <MY_FUNCTION><![CDATA[
// comment here
let my_function = () => console.log("Hello World");
  ]]></MY_FUNCTION>
  <LESS_THAN><![CDATA[
let less_than = (a,b) => a < b;
  ]]></LESS_THAN>
  <GREATER_THAN><![CDATA[
let greater_than = (a,b) => a > b;
  ]]></GREATER_THAN>
</JS>

---

Related Topics