Using CSS

The look of the HTML file can be changed by adding stylesheet specifications to the header of the document. For help on CSS, see www.w3schools.com/css. Here is an example that uses a sans-serif font for text and adds shading to code and Stata output:

webdoc init, logall

/***
<!DOCTYPE html>
<html>
<head>
    <title>Example 1</title>
    <style>
        body {
            font-family: sans-serif; padding: 0 15px; max-width: 700px;
        }
        code { 
            background-color: #f2f2f2; border-radius: 3px; padding: 3px;
        }
        pre {
            background-color: #f2f2f2;
            border-radius: 3px; padding: 12px;
        }
        pre code {
            background: transparent; padding: 0;
        }
    </style>
</head>
<body>
<p>Open the 1978 Automobile Data and run a regression of price on 
milage using the <code>regress</code> command.</p>
***/

sysuse auto
regress price mpg

/***
</body>
</html>
***/
Code
1.png
[top]

Default header

If you do not want to put together your own header (and footer), you can use the header option of webdoc init to generate an automatic header, as in the following example:

webdoc init, logall header(title(Example 2) width(700px))

/***
<p>Open the 1978 Automobile Data and run a regression of price on 
milage using the <code>regress</code> command.</p>
***/

sysuse auto
regress price mpg
Code
2.png

In the example, suboption title() specifies the text for the <title> tag in the document header and suboption width() sets the maximum page width. Further suboptions to specify meta data for the page, such as author() or keywords() are available; see the description of the header() option in the help file.

[top]

Stata output schemes

The header() option has an stscheme() suboption that allows you to select a Stata color scheme for output sections. For example, choose scheme classic for a classic Stata look:

webdoc init, logall header(width(700px) stscheme(classic))
sysuse auto
regress price mpg
Code
3.png

Likewise, stscheme(desert) would choose the desert color scheme:

webdoc init, logall header(width(700px) stscheme(desert))
sysuse auto
regress price mpg
Code
4.png

Further predefined schemes, matching the built-in color schemes provided by Stata (see the preferences dialog of Stata's Results window), are available. Furthermore, a set of options is available to modify the predefined schemes or create an own scheme; see the description of the stscheme() suboption in the help file. For example, to use the desert scheme, but use bold font for results and red for input (commands), you could type:

webdoc init, logall header(width(700px) stscheme(desert rbf cfg(red)))
sysuse auto
regress price mpg
Code
5.png
[top]

Bootstrap/Bootswatch

By default, if the header() option is specified, webdoc writes a minimal header so that the page displays well on computer screens and mobile devices. Alternatively, you can use the bstheme() suboption to include a Bootstrap CSS file; see the bstheme() suboption in the help file. For example, the following code includes the Cerulean theme from bootswatch.com:

webdoc init, logall header(width(700px) bstheme(cerulean, selfcontained))

/***
<h3>Exercise 1</h3>
<p>Open the 1978 Automobile Data and run a regression of price on 
milage using the <code>regress</code> command.</p>
***/

sysuse auto
regress price mpg
Code
6.png

Option selfcontained has been specified so that the Bootstrap CSS is copied into the HTML file. If option selfcontained is omitted, an external link to the CSS file at BootstrapCDN is included.

[top]

Math

Various solutions exist to display mathematics on web pages. For example, in a HTML5 document, you can use MathML to typeset mathematical formulas (also see the documentation at Mozilla). Another approach is to include LaTeX code in the HTML document and then use JavaScript to render the formulas for display. Examples are LaTeXMathML, jsMath, jqMath, or MathJax. Yet another approach is to transform the LaTeX code to images; see, e.g., mimeTeX or gladTeX.

Personally, I find MathJax quite convenient. An example is as follows.

webdoc init, logall header(width(700px))

/***
<p>
Using the 1978 Automobile Data, estimate regression model
\[
    Y_i = \beta_0 + \beta_1 X_i + \varepsilon_i
\]
assuming $\varepsilon_i \stackrel{\text{i.i.d.}}{\sim} (0, \sigma^2)$ 
for all $i$, where $Y$ is price and $X$ is milage. Your result should
look about as follows:
</p>
***/

sysuse auto
regress price mpg

/***
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });
</script>
<script type="text/javascript"
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
***/
Code
7.png

Basically, all you have to do is load the MathJax script at the beginning or at the end of the HTML document. The script will then turn all instances of LaTeX code into nice-looking formulas when displaying the document in a browser.

The example above is slightly more complicated because it configures MathJax such that $...$ in-line delimiters are supported, which are not supported by default to avoid conflicts with other uses of the dollar sign (an alternative is to use \(...\) for inline math; see here for details). In general, see the MathJax documentation for more information on how to configure and use MathJax.