Try to Add a Language Support to Prism

I try to add a language support to Prism, and I find a way to do so easly.

The design of Prism allows a programmer to develop its functionality with the development environment of browsers. It also supports the development with Node.js.

I don't have experience with the browser environment. That why I try to use Node.js first.

Using Node.js to develop the plugin and language support allows me work with IDE without lost my familiar debugging steps: break points, watchs, call stacks, ... .

I use Visual Studio Code as my IDE.

• Create a folder,
• Copy prism.js into the folder, (the prism.js is downloaded for the website of Prism)
• From the menu: File > Open Folder,

Now the prism.js is in the Explorer of Visual Studio Code.

• Add a new javascript source call app.js, with the code:

var loadedModule = require('./prism');

var pyCode = 'print \"Done.\"'; // a python code

var result = Prism.tokenize(pyCode, Prism.languages.python);
var result2 = Prism.highlight(pyCode, Prism.languages.python);

• Click on  the debug button (1),
• Click on Configure or Fix button (2),
• Select the Environment: Node.js (3),

A file called launch.json will be created. According to the webpage "Debugging your Express Application", some extra lines should added and the result is as follow:

• Add some lines to lanunch.json,

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858
        }
    ]
}

• Save launch.json and app.js,
• Make sure the debugger is active (1),
• Click on the tab of app.js to bring it to the front (2),
• Click the button "Launch Program" to execute the debug (3).

• You may add watches.
• The result is an array of objects
• The result2 is the output of the HTML to "hight light" to source code.

Note:

• In this example, I use a line of python code for the demonstration. This means, when I downloaded the prism.js, I had checked and included the python support.

With the help of this environment, I will try to create a PostScript support.


Viel Spaß!