Syntax Highlighting (in VS-Code) for Z^3 Language

From ZCubes Wiki
Jump to navigation Jump to search

ZCubes Syntax Highlighting for VS Code

This guide will help you install and use the ZCubes syntax highlighting extension in VS Code. You will run it locally using VS Code's Extension Development Host.

Prerequisites

Visual Studio Code (latest version recommended) Git (for cloning the repository)

Installation Steps

1. Clone the Repository

Gitexample-syntaxhighlighter.png

First, clone the ZCubes syntax highlighting extension repository to your local machine:

git clone https://github.com/Vishwa18K/z3.git. 
cd zcubes-syntax-highlighting

As shown in the screenshot, Be sure to be exact with filename and git links.

2. Open in VS Code

Open the extension project in VS Code or alternatively, you can: Open VS Code Go to FileOpen Folder Select the cloned extension directory. Regardless, Open the entire folder (or root folder in other words) on vscode. If done correctly, you should see exactly 7 files and 2 folders.

3. Launch Extension Development Host

Once the project is open in VS Code: Press F5 or go to RunStart Debugging This will open a new VS Code window titled Extension Development Host The extension is now active in this development window. (If this does not work click the play button with the 'bug' on it and under the drop down menu at the top and make sure it says 'Run extension debugger'. If it's not there then you have to manually add the extension debugger. A guide on how to do that can be found here

Extension-syntaxhighlighter.png
Launchjson-syntaxhighlighter.png

4. Test the Syntax Highlighting

In the Extension Development Host window: Create a new file with a ZCubes extension:

    • .z3 files
    • .zc files

Start typing ZCubes code to see the syntax highlighting in action Example ZCubes code to test:

PRINT "Hello, ZCubes!"
x = MAGICSQUARE(3)
result = SUM(x)
<script>
// JavaScript code should be highlighted here
console.log("Embedded JavaScript");
</script>
SyntaxHighlight-Example.png