Markdown CSS Extension

Do more with simple Markdown by using this simple CSS Script: control the appearance of the images, the alignment and format of texts, etc., with very simple code in pure basic Markdown.
v.1.0: 16 november 2018


 

NEUROMONACO

SUPPORT TEMPS REEL

La réponse à la demande tout de suite !

ANALYSES ET CONSEILS

La détection des déterminants psychologiques à activer

FORMATIONS PRATIQUES

Découvrir, Comprendre et Appliquer

EXTERNALISATION

Pour vous permettre la mise en pratique.

Licence

©Philippe Gouillou | http://gouillou.com
GNU GENERAL PUBLIC LICENSE Version 3

Installation

  1. Download or Clone the script from Github: Markdown CSS Extension
  2. Optional: modify it to fit your taste: color, font, etc. (Please send me the result of your ameliorations!)
  3. Upload it to YOUR server
  4. Add the line <link rel="stylesheet" type="text/css" href="apg_markdown_extension.css"> at the end of the HEAD section of your HTML file (or paste its content at the end of your CSS file)
  5. Use the markup as indicated below

Rem: to change the Image Code is extremely easy, but to change the Blockquote Code requires many tests because of the effects on the cascade

How to use

1. Markdown Image Code

Allows to change the size, the alignment, the margin, and the style of the image: just add the following codes between the [] in Markdown Image code.

The codes

  • Size :
    • Width : sixth, third, half, twothird, full, 100, 100sq, 150, 150sq, 200, 400, 450, 600
    • height : h50, h100, h200, hfull
  • Align : center, left, right
  • Margin : m0, m1
  • Style : 3d, circle, rounded

Example

![third center 3d rounded](../nimg/imac-mockup-SplitShire_IMG_5807.jpg) displays: third center 3d rounded

2. Markdown Blockquote Code

Allows to change the appearance of text by using the corresponding number of blockquode marks (>):

The codes

  1. > Blockquote normal
  2. >> Grey background
  3. >>> Text-Align: Center
  4. >>>> Text-Align: Right
  5. >>>>> Display as H2 without numerotation neither inclusion in TOC
  6. >>>>>> Exergue
  7. >>>>>>> Exergue with blue line

Examples

> (1) Blockquote normal

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.

>> (2) Grey background

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.

>>> (3) Text-Align: Center

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.

>>>> (4) Text-Align: Right

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.

>>>>> (5) Display as H2 without numerotation neither inclusion in TOC

Lorem ipsum dolor sit amet, consectetur adipiscing eli

>>>>>> (6) Exergue

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.

>>>>>>> (7) Exergue with blue lines

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.