Styleguide Markdown

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 5

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 6

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.”

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Note: the Figure-Figcaption and Details-Summary elements are not currently supported in markdown.


Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example


Footnotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique eleifend leo, ac varius turpis imperdiet ac. Ut scelerisque nisi vitae ante venenatis varius. Nunc aliquam, mi eget hendrerit efficitur, enim leo molestie enim, at scelerisque elit dui ac turpis. Aliquam finibus cursus quam, eget mattis nulla dapibus id. Etiam dolor purus, luctus nec mattis ac, pretium non justo. Duis venenatis, sem in ultrices aliquet, erat quam laoreet felis, quis tempus sem leo quis tortor. Duis molestie dolor leo, in placerat urna tincidunt a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.1

Monospace / Preformatted

Code block wrapped in “pre” and “code” tags:


// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in “pre” tags:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2 2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2 2
    • List Item 3.3
  • List Item 4

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2

Tables

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Media and Form Elements

The remaining sections contain elements that cannot be represented in markdown. Please consult the HTML version, to see these elements.

Arrangement

Je commence à réfléchir sur un bout de papier — en fait un bloc-note numérique — à la présentation de ce futur thème et voilà où j’en suis pour l’instant. Plutôt classique n’est-ce pas ? Cela dit je me demande si un des éléments ne serait pas mieux placé verticalement, par exemple l’entête (à  […]

Lire la suite

En attendant

Un petit ajout (temporaire) dans la feuille de style : /* Temporary */ body { max-width: 80em; margin: 1em; font-size: 1.25em; line-height: 1.5; } Ça sera plus lisible, je trouve, en attendant d’aller plus loin.

Reset ou Normalize ?

Voilà la question que tout développeur front, ou tout développeur de thème, se pose quand il s’agit de commencer à coder la feuille de style ! Un « Reset » CSS remet tout à 0, ou presque, marges, etc tandis qu’un « Normalize » s’emploie à faire en sorte que n’importe lequel des navigateurs utilisés  […]

Lire la suite

Juste pour voir

Contexte billet seul, mar. 2021

Petit essai sur le contexte billet seul en ajoutant quelques règles à la volée avec les outils développeur du navigateur pour mettre en évidence les éléments HTML utilisés dans la page. Je me suis limité à trois d’entre eux, H2, P et PRE : h2::before { content: "<h2>"; font-size:  […]

Lire la suite

Tous ensemble

Une idée que j’ai eue il y a quelques jours, créer de façon collaborative un nouveau thème pour Dotclear, sans aucun cahier des charges ni autre projet que de mettre en œuvre les choix décidés collégialement. Pour l’instant il n’y pas grand contenu et encore moins de présentation, ça viendra au fur  […]

Lire la suite

Haut de page