API:Styling content

There are two likely cases where you want to style HTML content with the same CSS as on a wiki:
 * You're presenting static HTML and want it to resemble wiki pages.
 * You're presenting wiki page content outside the wiki.

Presenting static HTML to look like wiki content
For the first, you can insert a ResourceLoader call into your HTML requesting the CSS of the modules that style your content. This is likely to be something like ''The above is invalid HTML, edited for clarity. In valid HTML, you need to HTML-escape the ampersands, thus  and URL-encode the command and pipe symbol.''

In more detail, the query string parameters are:
 * requests the ResourceLoader module that defines the CSS used by MediaWiki's default Vector skin.
 * you can request the CSS of additional ResourceLoader modules by separating them with the pipe symbol '|', for example
 * because you're requesting a stylesheet
 * is a parameter to ResourceLoader in case any of the modules' content varies according to the user's skin
 * tells ResourceLoader to minimize the CSS output, removing whitespace. You can change it  during development to the query string to get more readable output
 * the trailing  avoids IE6 problems where it can sometimes think the dots in module names are unsafe extensions (30840.)

Presenting wiki content
You could use a similar approach when displaying the HTML of wiki content. However, you don't know in advance what modules the wikitext uses. If it has parser tags in it such as,    or   they may require their own CSS and JavaScript.

You can ask the parser what modules you need using

Example: Ask for the modules used by the wikitext: : https://en.wikipedia.org/w/api.php?action=parse&text=Hello%3Cref%3EA%20footnote%3C/ref%3E%20%3Creferences/%3E&contentmodel=wikitext&prop=modules|jsconfigvars

This returns, in part

RESTBase handles this for you
The RESTBase content API does this for you. If you look at the HTML source of an API call to the rest_v1 content service such as http://en.wikipedia.org/api/rest_v1/page/html/Albert%20Einstein, you can see it has a  request in it for the appropriate set of modules:

This ensures that the HTML returned can be rendered "as is". It adds some of the CSS from the Vector skin, styling for citations, etc.

As a toy example, MiniWiki is a toy wiki browser that requests pages from  and presents their HTML.

JavaScript
Some modules include dynamically-loaded JavaScript which changes page content. Code that you want to run when the wiki page content displays should wait for the  mw.hook event to fire, rather than the usual jQuery   callback.