API:Styling content
This page is currently a draft.
|
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
editFor 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
- you can request the CSS of additional ResourceLoader modules by separating them with the pipe symbol '|', for example
only=styles
because you're requesting a stylesheetskin=vector
is a parameter to ResourceLoader in case any of the modules' content varies according to the user's skindebug=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
editYou 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
editThe 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&only=styles&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
editJavaScript
editSome 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.