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
Links
Lists
- unordered
- list
- ordered
- 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.
Additional info Possible plugin
Callouts
A tip!This is a tip…
A note!This is a note…
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 blockconst yo = "blah";
// jsx code blockfunction 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
prefer ‘title’ to comment for clean cross-posting
// the block has attribute `title="some.js"`let some = "javascirpt";
let some = "javascirpt";
# frame="terminal"# title="install chantastic"> npm install chantastic
Code text markers
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^// 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
Yeeesssss!! Lowkey obsessed with decision records/ADRs right now. If I were starting a new company (which I *am not,* and *will never*) I would be using these from day one.
— Charity Majors (@mipsytipsy) December 10, 2022
And not just for technical decisions, either. For any decision with a blast radius of >1 group. https://t.co/Zi4ndzSNA0
YouTube
It’d be really nice to extend oembed-transformer to allow for contoiners