Skip to content

Latest commit

 

History

History
675 lines (548 loc) · 20.7 KB

themeable.md

File metadata and controls

675 lines (548 loc) · 20.7 KB
title author description
Typora Themeable
John Hildenbiddle
A clean, customizable, typography-focused theme for the markdown editor Typora

Typora Themeable

Color Palette

50
100
200
300
400
500
600
700
800
900
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose

Monochrome Palette

50
100
200
300
400
500
600
700
800
900
Slate
Gray
Zinc
Neutral
Stone

Heading 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Heading 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Heading 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Heading 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Heading 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Heading 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

Text Styles

Body text

Italic text

Bold text

Strikethrough

==Highlight text==

Underline Text

Preformatted text

Small Text

This is ^superscript^ text

This is subscript text

Blockquotes

Cras aliquet nulla quis metus tincidunt, sed placerat enim cursus. Etiam turpis nisl, posuere eu condimentum ut, interdum a risus. Sed non luctus mi. Quisque malesuada risus sit amet tortor aliquet, a posuere ex iaculis. Vivamus ultrices enim dui, eleifend porttitor elit aliquet sed.

- Quote Source

Links

Inline link

Reference link

www.some-domain.com

[email protected]

Lists

Ordered

  1. Ordered 1
  2. Ordered 2
    1. Ordered 2a
    2. Ordered 2b
  3. Ordered 3

Unordered

  • Unordered 1
  • Unordered 2
    • Unordered 2a
    • Unordered 2b
  • Unordered 3

Task Lists

  • Task 1
  • Task 2
    • Subtask A
    • Subtask B
  • Task 3

Tables

Left Align Center Align Right Align Non‑Breaking Header
A1 A2 A3 A4
B1 B2 B3 B4
C1 C2 C3 C4

Code

This is inline code and this is a linked inline code.

:root {
  --color-primary: var(--sky-600);
}

.my-class {
  margin: 1em;
  background: url('path/to/image.png');
}

@keyframes spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
// Mergician - https://jhildenbiddle.github.io/mergician/
import mergician from 'mergician';

const obj1 = { a: [1, 1], b: { c: 1, d: 1 } };
const obj2 = { a: [2, 2], b: { c: 2 } };
const obj3 = { e: 3 };

const mergedObj = mergician({
    skipKeys: ['d'],
    appendArrays: true,
    dedupArrays: true,
    filter({ depth, key, srcObj, srcVal, targetObj, targetVal }) {
        if (key === 'e') {
            targetObj['hello'] = 'world';
            return false;
        }
    }
})(obj1, obj2, obj3);

console.log(mergedObj);

// Output: { a: [1, 2], b: { c: 2 }, hello: 'world' }
<!doctype html>
<html lang="">
<head>
  <meta charset="utf-8">
  <title>My Site</title>
  <meta name="description" content="My web site">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="app">Loading...</p>
  <script src="js/app.js"></script>
</body>
</html>

HTML

This is an HTML block. Click to edit.


abbr tag with title

abbr (Abbreviation) tag without title

dfn tag with title

dfn (Definition) tag without title

Horizontal Rule


Footnotes

Lorem ipsum dolor sit amet 1.

Keyboard

abc123

F1F2F3

⌘ CommandZ

Arrow Up

Arrow Down

Arrow Left

Arrow Right

Caps Lock

Command

Control

Delete

Delete (Forward)

End

Enter

Escape

Home

Option / Alt

Return

Shift

Space

Tab

Tab + Shift

Images

Inline

alt text

Reference

alt text

Math

$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} $$

Diagrams

Flow

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

Mermaid

Class Diagram

classDiagram
  Animal <|-- Duck
  Animal <|-- Fish
  Animal <|-- Zebra
  Animal : +int age
  Animal : +String gender
  Animal: +isMammal()
  Animal: +mate()
  class Duck{
    +String beakColor
    +swim()
    +quack()
  }
  class Fish{
    -int sizeInFeet
    -canEat()
  }
  class Zebra{
    +bool is_wild
    +run()
  }
Loading

Flowchart

graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Loading

GANNT

%% Example with slection of syntaxes
gantt
dateFormat  YYYY-MM-DD
title Sample GANTT Chart

section A section
Completed task:done,   des1, 2014-01-06,2014-01-08
Active task   :active, des2, 2014-01-09, 3d
Future task   :        des3, after des2, 5d
Future task2  :        des4, after des3, 5d

section Critical tasks
Completed task in the critical line:crit, done, 2014-01-06,24h
Implement parser and jison         :crit, done, after des1, 2d
Create tests for parser            :crit, active, 3d
Future task in critical line       :crit, 5d
Create tests for renderer          :2d
Add to mermaid                     :1d

section Documentation
Describe gantt syntax              :active, a1, after des1, 3d
Add gantt diagram to demo page     :after a1  , 20h
Add another diagram to demo page   :doc1, after a1  , 48h

section Last section
Describe gantt syntax              :after doc1, 3d
Add gantt diagram to demo page     : 20h
Add another diagram to demo page   : 48h
Loading

Pie Chart

pie title Chart Title
  "A" : 1
  "B" : 1
  "C" : 1
  "D" : 1
  "E" : 1
  "F" : 1
  "G" : 1
  "H" : 1
  "I" : 1
Loading

Sequence Diagram

sequenceDiagram
  participant A as Alice
  participant B as Bob
  A->>B: Hello John, how are you?
  Note right of B: Bob thinks
  B-->>A: I am good thanks
Loading

Sequence

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks

Embeds

Iframe

<iframe height='400' scrolling='no' title='CSS Device Frames - Demo' src='http://codepen.io/jhildenbiddle/embed/zYzmzqX/?theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true'></iframe>

Audio

Video