Markdown Customization with HTML/CSS

Markdown is HTML

Markdown	#,…,######	paragraph	[]()	![]()
HTML Tags	h1,…,h6	p	a	img

Text Alignment/Centering

<!-- centering title -->
<h1 style="text-align:center">Markdown Customization</h1>
<!-- align text -->
<p style="text-align:center">Center text</p>
<p style="text-align:Right">Right text</p>

Center text

Right text

Font

Size and Color

<span style="font-size:2rem; color: red">2 rem red text</span>
<p style="font-size:15px;">15px paragraph</p>

2 rem red text

15px paragraph

Note: p and span both works for texts. The difference is, p means a paragraph with new line, while span is just a text wrapper and span does not support text-align option.

Length Unit in CSS

There are many ways to describe size in css, - Absolute - px(pixels), cm, mm, in, pt(1/72 inch), pc(12pt) - Relative (Strongly Recommended) - em: Relative to the font-size of the element - rem: Relative to font-size of the root element - vw: Relative to 1% of the width of the viewport - vh: Relative to 1% of the height of the viewport* - 50%: Relative to 50% of parent element

More on Font Style

HTML tags can be nested *, **, ***, however the color will be overrided to black, so we prefer a pure css solution.

<span style="
    font-weight: bold; 
    font-style: italic;
    text-decoration: underline;">
    A bold and italic text with underline
</span>

A bold and italic text with underline

Space and empty line

<br> new line
New line &emsp 4 space &ensp 2 space   1 space

Images Style

Absolute Size

<img src="https://krisrs1128.github.io/LSLab/assets/img/lakes.png" width=400 height=100/>

Relative Size

Set image width relative to page width, then use aspect-ratio to lock the ratio of width and height. Note this only works on modern browser.

<img src="https://krisrs1128.github.io/LSLab/assets/img/lakes.png" style="width: 10%; aspect-ratio: 4 / 3;"/>

Alternative text

<img src="https://www.bing.com/" style="width: 10%; aspect-ratio: 4 / 3;" alt="broken image">

Centering

When using img tag, centering tag of markdown does not work any more, so we need to define a bit more css.

<img 
  src="https://krisrs1128.github.io/LSLab/assets/img/lakes.png"
  style="display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; aspect-ratio: 16 / 9;"
/>

Complex Layout

This is rather similar to writing native HTML/CSS. We can re-organized the text and image by carefully designing the position and flex layout (for more on flex layout, please see this tutorial). However, this is usually not necessary so we only raise an example here.

In addition, sometimes we can add <div></div> tags to wrap up some elements so that we configure their layout together by css. This is simliar to what span tag is dong.

Here is an example of putting text on the right and image on the left

<!-- Remove "flex-direction: row-reverse" if you want the text to be on the left -->
<div style="display: flex; flex-direction: row-reverse">
    <p style="width:40%">...</p>
    <img src="https://krisrs1128.github.io/LSLab/assets/img/lakes.png" 
        style="width: 60%; aspect-ratio: 16 / 9;"/>
</div>