Skip to main content

Section D.6 Visual Studio Code

Oscar Levin

VS Code is a free and open source, cross platform text editor from Microsoft, with many of the same features as Sublime Text and Atom. The package PreTeXt-tools 1  provides highlighting and snippets for PreTeXt by extending the XML language support of VS Code.

marketplace.visualstudio.com/items?itemName=oscarlevin.pretext-tools

Bryan Jones' CodeChat extension for VS Code provides a live preview of the HTML version directly in VS Code. Each time a file is saved, the HTML is re-generated and the HTML of the file being edited is updated in the CodeChat window. (This is usable when the document is small and the entire document can be processed quickly. For larger documents, this feature will become usable when becomes possible to selectively compile only part of a document.)

Installing CodeChat.

CodeChat requires a recent version of Python3 to run a local web server. It is recommended to install a Python Virtual Environment so that CodeChat can have access to the latest version, without interfering with other uses of Python on your computer.

Install CodeChat using the installation instructions. Note that those instructions also cover installing Python in a virtual environment.

Create a directory for the HTML files which will be created from the PreTeXt source you will be editing. Make a note of the path to that directory.

In the CodeChat files you installed, there should be a “pretext” directory at the end of a path like “CodeChat_system/CodeChat_Server/CodeChat_Server/templates/pretext”. Create a subdirectory of that “pretext” directory and put your PreTeXt source there. (It is fine to put a minimal document.)

In that same “pretext” directory is a file “codechat_config.yaml”. Edit that file and after output_path:, put the full path to the HTML directory you created. Then on the line starting args: you will put (all on one line: the expression below is split-up for clarity):

args:
AbsolutePathToPython3
AbsolutePathToThePreTeXtScript
--component all --format html
--directory AbsolutePathToOutputHTMLFile
AbsolutePathToMainPreTeXtSourceFile
-x debug.editable yes

The StringsInCamelCase need to be replaced by the appropriate values for your system. The other strings should be exactly as written above. Put a space between the items on different lines.

The command you put on the args: line creates the HTML version of the PreTeXt source you are planning to edit. Test the command by running it in the shell and verifying the HTML files are created (and are in the directory you created).

To install CodeChat in VS Code, click the “Extensions” icon along the left edge of the VS Code window: it looks like 3 squares connected in and “L” shape, separated slightly from a 4th square. Type “CodeChat” in the search box, and then click to install the extension.

Finally, type ctrl P, command P on a Mac, to activate CodeChat. A new window should appear in VS Code. Edit and save a PreTeXt file to see the HTML version of the file you are editing.

You may need to re-activate CodeChat each time you start a new editing session.

The source for CodeChat is available on GitHub.