Post Styleguide

This page shows the use of severale several markdown features, their interpretation by markdown-it, and their resulting styles.

Contents

Headings

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

This is a paragraph

Next to another paragraph

And a third

Decoration

italicized

emboldened

striken

marked

link

external-link

Lists

  1. ordered
  2. list
Description list
A list of terms and their definitions.
Long definition
Definitions can be very long. In the case that it is long, it should wrap nicely.
Multiple definitions
This is one definition of the second term.
This is another definition of the second term.

Quotes

Inline quote

Block quote

But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.
— Jeremy Keith, Mental models

Additional info Possible plugin

Callouts

A tip!
This is a tip…
A note!
This is a note…

More on obsidian callouts.

note: pencilIcon,
abstract: clipboardListIcon,
summary: clipboardListIcon,
tldr: clipboardListIcon,
info: infoIcon,
todo: checkCircleIcon,
tip: flameIcon,
hint: flameIcon,
important: flameIcon,
success: checkIcon,
check: checkIcon,
done: checkIcon,
question: helpCircleIcon,
help: helpCircleIcon,
faq: helpCircleIcon,
warning: alertTriangleIcon,
attention: alertTriangleIcon,
cautions: alertTriangleIcon,
failure: xIcon,
missing: xIcon,
fail: xIcon,
danger: zapIcon,
error: zapIcon,
bug: bugIcon,
example: listIcon,
quote: quoteIcon,
cite: quoteIcon,

Technical

CMD + T

inline code

// JS code block
const yo = 'blah'
// jsx code block
function MyComponent({name, ...props}) {
  return <div {...props}>Hello {name}!</div>
}
// diff
 function chant(message) {
 export function chant(message) {
  return [...Array(3)].map(() => `${message}!`).join(" ");
}

Code frame

expressive-code/plugin-frame

prefer ‘title’ to comment for clean cross-posting

some.js
// the block has attribute `title="some.js"`
let some = 'javascirpt'
can-also-use-first-comment-with-suffix.js
let some = 'javascirpt'
install chantastic
# frame="terminal"
# title="install chantastic"
> npm install chantastic

Code text markers

expressive-code/plugin-frame

//    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//    This is the meta information of this code
//    block. It contains 3 text markers:
//    - Line range: {4, 12-15}
//    - Plaintext search: "this will be marked"
//    - Regular expression search: /ye[sp]/
function thisIsJavaScript() {
  // This entire block gets highlighted as JavaScript,
  // and we can still add diff markers to it!
  console.log('Old code to be removed')
  console.log('New and shiny code!')
}
function thisFunctionWasDeleted() {
  return ':sadface:'
}
function thisFunctionWasInserted() {
  return ':happyface:'
}


// "this was inserted too"
// yep

Details

Some disclosure

Markdown can go in here if you leave extra line breaks.

Tweet

YouTube

It’d be really nice to extend oembed-transformer to allow for contoiners