Skip to content
This repository was archived by the owner on Jul 1, 2024. It is now read-only.

Style Guide

Jump to bottom
Vadim Makeev edited this page Feb 10, 2014 · 10 revisions

Dev.Opera uses “kramdown” markdown engine with some additional features:

URL

Given title:

The W3C device orientation API: detecting orientation and acceleration

Bad URL:

the-w3c-device-orientation-api-detecting-orientation-and-acceleration

Good URL:

w3c-device-orientation

Header

Every header on a page will get id generated from its content:

# W3C device orientation API
…
<h1 id="w3c-device-orientation-api">W3C device orientation API</h1>

It's good enough for simple headers like “Read more” or “Introduction”, but if your header contains more than 3-5 words and you're going to use it, it's better to specify custom id by adding {#id}:

# W3C device orientation API {#w3c-api}
…
<h1 id="w3c-api">W3C device orientation API</h1>

Code

Lorem `<html>` ipsum
→   <html>
····<html>
<figure id="listing-1">
<div markdown="block">
    <sample>
</div>
    <figcaption markdown="span">Listing 1: Code `sample`</figcaption>
</figure>

Quote

> First paragraph
>
> Second paragraph, same quote

Note

Not decided yet.

Picture

<figure id="figure-1">
    <img src="filename.jpg" alt="Visual description">
    <figcaption markdown="span">Figure 1: Sample `figure`</figcaption>
</figure>

Inline demo

<figure>
	<div id="demo-1">
		<div></div>
	</div>
	<style>
		#demo-1 {
			color:red
			}
			#demo-1 div {
				color:green;
				}
	</style>
	<figcaption markdown="span">Figure 1: Sample `demo`</figcaption>
</figure>
<figure id="demo-1">
	<iframe src="demo.html"></iframe>
	<figcaption markdown="span">Figure 1: Sample `demo`</figcaption>
</figure>

Clone this wiki locally