PHILIPPE GOUILLOU

Markdown CSS Extension

MD CSS Extension on Github

Do more with 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.
version 2.0: 21 february 2020

Licence

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

Version

  • 2.0: 21 february 2020: add responsive break
  • 1.1: 4 july 2019: Typo
  • 1.0: 16 november 2018: First public version

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
      • Full widh under treshold (new in v 2.0): fullxs, fullsm, fullmd,fulllg
    • height: h50, h100, h200, hfull
  • Align : center, left, right
  • Margin : m0, m1
  • Style : 3d, circle, rounded

Examples

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

And if you add fullsm, the image will be displayed full size in small screens: third center 3d rounded fullsm

2. Markdown Blockquote Code

Allows to change the appearance of text by using the corresponding number of blockquote 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.