markdown.bz

Markdown rendering examples

These are fixed samples created by the markdown.bz team, rendered by the same engine as live shared pages. No user documents or recent posts are included. Check the supported syntax and how it looks before you publish, and copy the raw Markdown to use in your own documents.

1. Tables, task lists and code

A basic example with GitHub Flavored Markdown task lists, a table and a code block with a file name. You can copy the code with the button in the file name bar. On narrow screens, tables and code scroll horizontally.

dev-setup.md

Setting up your development environment#

This page walks new team members through everything they need before they start coding. Follow the steps from the top and you will be done in about 30 minutes.

Setup progress#

  • Accept the repository invitation
  • Install an editor
  • Run the app locally

These are the tools we use and the versions we have tested.

ToolVersionUsed for
Node.js22Running the app
Git2.45 or laterTracking changes

Starting the app#

Install the dependencies, then start the development server. Open the URL it prints in your browser and you are ready.

setup.sh
npm install
npm run dev

2. Mermaid flowchart

Code blocks marked as mermaid are rendered as diagrams. If there is a syntax error, you can spot it in the pre-publish preview.

support-flow.md

How we answer support requests#

When a request comes in, we first check whether we can answer it right away. If not, the person in charge looks into it and replies the same day.

Drawing diagram…

We add each answer to the FAQ so that the next request goes faster.

3. Inline and block math

Math wrapped in dollar signs is rendered with KaTeX. Short expressions can sit inline within a sentence, and longer ones in a block of their own.

statistics-notes.md

Notes on standard deviation#

Standard deviation tells you how spread out a set of test scores is. For nn scores x1,x2,…,xnx_1, x_2, \dots, x_n with mean xˉ\bar{x}, the standard deviation σ\sigma is:

σ=1n∑i=1n(xi−xˉ)2\sigma = \sqrt{\frac{1}{n} \sum_{i=1}^{n} (x_i - \bar{x})^2}

The smaller the value, the more closely the scores cluster around the mean.

4. Callouts & collapsible blocks

Renders GitHub and Obsidian callouts, plus the ::: boxes and collapsible blocks of HackMD, Zenn, Qiita and Docusaurus. Markdown exported from these tools can be pasted in and shared as is.

study-session.md

Team study session#

At the November study session, we will share tips for writing how-to guides in Markdown. Everyone is welcome, and the slides will be shared on this page.

Note

We will add the recording to this page after the session.

Warning

If you plan to invite someone from outside the company, let the organizer know in advance.

What to bring

Bring a laptop if you can, so you can try things out as we go.

Can I join if I am new to Markdown?

Yes. We will start with headings and lists.

All the slides from the last session are now available.

Seats in the room are limited. You can also join online.

Agenda
  1. Markdown basics (15 min)
  2. Writing a how-to guide (30 min)
  3. Q&A (15 min)

5. Obsidian syntax

Renders internal links and tags in properties, [[#heading|display name]] links to headings in the same document, ==highlights==, and a closing “— speaker” line in quotes. Links to other notes become text with a marker showing they cannot be opened.

writing-workshop.md
Properties2 items
tags
#writing#workshop
source
Workshop transcript

Writing workshop recap#

Jump to: Key takeaways / Next steps / Writing notes

Key takeaways#

The main point of the workshop was that clear writing starts with one idea per sentence. Simply splitting long sentences makes things much easier for the reader.

When you write, you are borrowing your reader’s time.

— The instructor

Next steps to try#

  • Keep sentences under 25 words
  • Put the conclusion in the first paragraph

6. Design templates

Before publishing, you can choose the design of your shared page from 7 templates. Pick a template below to switch the look of the same Markdown on the spot.

Design template

The preview below changes to match your choice. Fonts, headings, tables and callouts all change together.

Writing guides people can follow#

People often read a how-to guide in a hurry, starting halfway through. Put the conclusion first, and keep one action per step so that readers never lose their place.

Two ways to write steps#

StyleHow readers take it
Steps joined in paragraphsHard to tell how far they have got
A numbered listThey can see where they are at a glance
Read it out loud

Wherever you stumble when reading aloud, your readers will stumble too.

Order for your next guide#

  1. State the goal in one sentence
  2. Write the steps as a numbered list
  3. Describe the finished state at the end
template.md
## Goal
In one sentence, what this guide helps you do.

Try it with your own Markdown

  1. Click Copy Markdown on the sample closest to what you need.
  2. Paste it on the Upload page and rewrite it with your own content.
  3. Check the headings, tables, code, diagrams and math in the preview, then choose a design template.
  4. Set an expiry and a password if needed, then create the share URL.

For details on writing Mermaid and math, see How to share Mermaid diagrams and math in Markdown. For supported formats and limits, see Help / FAQ.

Create a shared page from a sample

Last reviewed: / Written and reviewed by the markdown.bz team