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.

Example: {{ {{TNTN|ApiEx}}
 * desc=Ask for the modules used by wikitext:
 * p1=action=parse
 * p2=text={{urlencode:Hello

RESTBase handled for you.
The RESTBase content API does this for you. If you look at the HTML source of http://en.wikipedia.beta.wmflabs.org/api/rest_v1/page/html/Albert%20Einstein, you can see it has a  request in it for the appropriate set of modules: http://en.wikipedia.beta.wmflabs.org/w/load.php?modules=mediawiki.legacy.commonPrint,shared|mediawiki.skinning.elements|mediawiki.skinning.content|mediawiki.skinning.interface|skins.vector.styles|site|mediawiki.skinning.content.parsoid|ext.cite.style&only=styles&skin=vector

This ensures that the HTML returned can be rendered "as is". XXX missing

JavaScript
Some modules include dynamically-loaded JavaScript. In order for code not to run "too soon", code should wait for the XXX wikicontent event to fire, rather than the usual jQuery  callback.