Style
This page is inspired and based of off Binyamin's style guide, which took inspiration from Brian Devries's style guide.
Block-level elements
Paragraphs
Cillum laboris ex proident et in exercitation eu aliqua cillum magna non. Veniam incididunt id tempor qui cillum laborum reprehenderit esse nisi excepteur velit. Mollit proident consectetur ea adipisicing fugiat cillum nostrud officia ullamco officia amet fugiat. Fugiat excepteur ullamco nulla reprehenderit ipsum do sit laboris.
Blockquotes/Notes
Officia consectetur in labore deserunt qui laborum.
Officia consectetur in labore deserunt qui laborum.
Officia consectetur in labore deserunt qui laborum.
Officia consectetur in labore deserunt qui laborum.
Cillum exercitation magna eiusmod laborum mollit excepteur irure officia laboris enim laborum in quis. Et irure elit est veniam occaecat culpa. Do commodo consectetur sit nisi ex laboris aute ex fugiat eiusmod velit labore. Nisi minim non dolore et consectetur id. Do nulla tempor magna qui quis ullamco nostrud duis officia laboris est sunt. Veniam consectetur proident dolor excepteur ullamco qui proident exercitation mollit sit.
Lists
- A numbered list
A bulleted list
Lorem
- Ipsum
Code blocks
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
npm install prettier -D
html {
scroll-behavior: smooth;
}
print("Hello World!")
def sum(a, b):
return a + b
console.log('Hello World!');
function sum(a, b) {
return a + b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body></body>
</html>
Horizontal rules
Tables
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Images
Inline elements
- Keyboard Input: ⌘ + Shift + P
- Inline code -
Inline Code - This is an internal text link.
- This is an external text link
- Strong is used to indicate strong importance.
- This text has added emphasis.
- The b element is stylistically different text from normal text, without any special importance.
- The i element is text that is offset from the normal text.
- The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deletedand This text is inserted.This text has a strikethrough- Superscript®.
- Subscript for things like H2O.
- This small text is small for for fine print, etc.
- Abbreviation: HTML
- CSS using the markdown-it-abbr plugin.
This text is a short inline quotation.
- This is a citation.
- The dfn element indicates a definition.
- The mark element indicates a highlight.
- The variable element, such as x = y.
- A footnote is... a footnote[1].
This is a footnote. ↩︎