API:Styling content

Load the necessary CSS and JavaScript for wikitext to appear as desired.

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[edit]

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

<link rel="stylesheet"
   href="//en.wikipedia.org/w/load.php?debug=false&lang=en&modules=mediawiki.legacy.commonPrint,shared|skins.vector.styles&only=styles&skin=vector&*">

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:

modules=skins.vector.styles 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 modules=skins.vector.styles|ext.wikihiero |mediawiki.legacy.commonPrint%2Cshared
only=styles because you're requesting a stylesheet
skin=vector is a parameter to ResourceLoader in case any of the modules' content varies according to the user's skin
debug=false tells ResourceLoader to minimize the CSS output, removing whitespace. You can change it &debug=true 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 (phab:T30840.)

Presenting wiki content[edit]

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 <cite>, <graph> or <hiero>they may require their own CSS and JavaScript.

You can ask the parser what modules you need using &action=parse&prop=modules|jsconfigvars

Example: Ask for the modules used by the wikitext Hello<ref>A footnote</ref> <references/>, which is using features of the Cite extension: https://en.wikipedia.org/w/api.php?action=parse&text=Hello%3Cref%3EA%20footnote%3C/ref%3E%20%3Creferences/%3E&contentmodel=wikitext&prop=modules%7Cjsconfigvars

This returns, in part

    "parse": {
        "modulestyles": [
            "ext.cite.styles"
        ],
    }

RESTBase handles this for you[edit]

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 load.php request in its header for the appropriate set of modules:

<link rel="stylesheet" href="//en.wikipedia.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&amp;only=styles&amp;skin=vector"/>

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 an example, MiniWiki is a toy wiki browser that requests pages from rest_v1 and presents their HTML. It only displays the body content of the page, so it looks in the <head> tag in the response from RESTBase for links with rel="stylesheet" tag and inserts their stylesheet into its own header.

Notes[edit]

JavaScript[edit]

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 wikipage.content mw.hook event to fire, rather than the usual jQuery $.ready callback.