Haghish, E. F. (2014). Applied Statistics Using Stata.

Free Online Stata Tips & Tutorials. Data Management; Stata Graphs and Graphics; Data Analysis; Stata Programming; Advanced Statistics

Updated on 1 October 2015

Statax: JavaScript Syntax Highlighter for Stata

| Quick Tips |     | Introduction |     | Installation |     | Using Statax |     | Editing Statax CSS |     | Statax Package |     | Download Statax |    

Quick Tips

Statax is a JavaScript syntax highlighter for Stata code in HTML documents. It is also a name for a package that creates example HTML file directly from Stata as well as converts Stata do and ado files to HTML. This article includes the documentation for the JavaScript program and the ado package.

<script type="text/javascript" src='http://haghish.com/statax/Statax.js'></script>/* Add Statax to website */

E. F. Haghish
Center for Medical Biometry and Medical Informatics
University of Freiburg, Germany
Twitter: @Haghish

Support further development of Statax (CodeMap Project)


Statax is a JavaScript program that highlights Stata Commands, Functions, Strings, Local and Global Macrso, Comments, Operators, Numbers, and braces identical to Stata text editor. Here is an example:

* Introducing Statax package!
// JavaScript Syntax Highlighter for Stata

quietly erase "`This' $Example"
noisily do `Something' $Awesome
forvalues num = 5/13 {
    	count if vari`num' > 10
    	generate x = runiform()

E. F. Haghish
Center for Medical Biometry and Medical Informatics
Unersity of Freiburg, Germany

The JavaScript code was developed as a part of the CodeMap Project which aim is to visualize Statistical analysis code files and statistical packages. Later on, I improved Statax.js amd applied it to the Weaver package which creates HTML and PDF dynamic documents for Stata. iT WAS A TIME TO RELEASE Statax.js program so that other Stata users can develop online material on their websites, blogs, forums, and enjoy a decent and effortless JavaScript syntax highlighter.

Statax was developed as an addendum for SHJS program which highlights syntax of many languages. New JavaScript and JQuery codes were written to highlight Stata syntax. Furthermore, to makes using Statax easy for everyone, an additional JavaScript file was written to load the source and CSS files dynamically and run them in the HTML document.


Automatic Installation

There are many ways to add Statax to your HTML document or website. The easiest way is to load the program by pasting the following script in your HTML document. This script will load all the CSS, JavaScript, and JQuery programs required for running the syntax highlighter on that document. This script does not require you to download Statax because my website will be the host for all the required files.

<script type="text/javascript" src='http://haghish.com/statax/Statax.js'></script>

Manual Installation

Alternatively, you can download Statax below, upload it to your own server and source Statax.js to your webpage as shown below.

<script type="text/javascript" src='/path/to/Statax-directory/Statax.js'></script>

Syntax Highlighter Styles

Statax comes with four built-in CSS style sheets which are located in Additional CSS Styles directory. To change the default syntax highlighter:

  • 1- Remove the Statax.css file
  • 2- Copy any of the Daring.css, Sunset.css, or Wrangler.css files to the directory where the JavaScript files are
  • 3- Rename the new CSS file to Statax.CSS

These styles are shown below respectively:

Using Statax

In order to use Statax for highlighting Stata code, the code should be wrapped with a <pre> tag and sh_stata class as shown below. The <pre> tag preserves the white-space and the sh_stata class refers to the class of CSS style sheet that defines the color of each Stata syntax element.

<pre class="sh_stata"> . Stata code . Stata code ... </pre>

Editing Statax CSS

If you wish to change the colors of the syntax highlighter, you should download and install Statax manually. The Statax.css which includes the style sheet code, has a guide about each element and if you are familiar with CSS, you can create your own style sheet.

Statax Package

There is a Stata package that can convert do and ado files to HTML and highlight their syntax using Statax.js. The package is explained in details here.

Download Statax (JavaScript)

Statax JavaScript and CSS files can be downloaded below.

statax.zip JavaScript version 1.0