Meta tags:
description= Write a markdown code block that renders anywhere: inline backticks, fenced blocks, language identifiers for syntax highlighting, and the common errors.;
Headings (most frequently used words):
and, code, fence, markdown, blocks, the, fences, inside, inline, highlighting, fenced, indented, language, identifiers, is, length, highlighted, with, single, backticks, four, space, block, why, won, syntax, lists, where, actually, happens, common, mistakes, how, to, fix, them, frequently, asked, questions, related, answers, keep, learning, when, your, contains, backtick, what, not, for, tilde, blank, lines, worth, knowing, diff, turning, off, on, purpose, list, item, showing, line, horizontal, scroll, unclosed, smart, quotes, pasting, from, word, processor, that, too, far, name, typos, complete, guide, github, flavored, cheat, sheet, tools, learn, reference, platforms, company,
Text of the page (most frequently used words):
the (148), markdown (94), and (66), code (48), fence (36), with (34), block (29), that (26), #inside (24), #backticks (22), blocks (18), line (18), one (17), language (17), fences (17), editor (16), for (16), four (16), html (15), not (14), highlighting (13), you (13), yes (13), syntax (12), text (12), three (12), name (12), all (11), what (11), table (11), this (11), lines (11), fenced (10), every (10), inline (10), use (10), your (9), nothing (9), single (9), space (9), opening (9), after (9), list (9), lists (8), same (8), into (8), than (8), own (8), indented (8), them (8), discord (7), bold (7), github (7), guide (7), how (7), any (7), file (7), are (7), where (7), backtick (7), example (7), content (7), two (7), renderer (7), colour (7), identifiers (7), spaces (7), item (7), first (7), from (7), platforms (6), generator (6), does (6), highlighter (6), which (6), diff (6), closing (6), point (6), rest (6), word (6), before (6), characters (6), character (6), blank (6), source (6), obsidian (5), notion (5), flavored (5), preview (5), page (5), else (5), more (5), cannot (5), wrap (5), costs (5), python (5), everything (5), scroll (5), add (5), their (5), get (5), const (5), quotes (5), when (5), length (5), must (5), contains (5), faq (4), headings (4), links (4), tables (4), cheat (4), sheet (4), viewer (4), live (4), platform (4), keep (4), long (4), plain (4), install (4), read (4), outside (4), identifier (4), wrong (4), bash (4), above (4), its (4), happens (4), why (4), data (4), broken (4), start (4), run (4), smart (4), look (4), error (4), hello (4), rather (4), prose (4), something (4), shell (4), most (4), reader (4), highlighted (4), here (4), output (4), config (4), because (4), indent (4), indentation (4), return (4), 2026 (3), reddit (3), glossary (3), footnotes (3), blockquotes (3), italic (3), images (3), reference (3), learn (3), toc (3), pdf (3), tools (3), plus (3), see (3), app (3), open (3), instead (3), raw (3), ends (3), outer (3), names (3), renders (3), yaml (3), json (3), has (3), document (3), then (3), looks (3), coloured (3), already (3), means (3), literal (3), paste (3), out (3), pasting (3), processor (3), will (3), unclosed (3), second (3), close (3), turns (3), common (3), mistakes (3), fix (3), say (3), tag (3), function (3), commands (3), horizontal (3), never (3), highlight (3), using (3), write (3), showing (3), leave (3), npm (3), would (3), makes (3), off (3), leading (3), items (3), worth (3), otherwise (3), exactly (3), mdeditor (2), about (2), editors (2), readme (2), browser (2), library (2), try (2), notes (2), element (2), examples (2), complete (2), answers (2), thing (2), only (2), underneath (2), phone (2), convert (2), put (2), cell (2), work (2), starts (2), containing (2), several (2), aliases (2), unknown (2), just (2), sql (2), css (2), can (2), somewhere (2), matching (2), swallowed (2), formatting (2), missing (2), catches (2), such (2), sentence (2), info (2), string (2), typos (2), left (2), too (2), far (2), result (2), through (2), terminal (2), site (2), punctuation (2), visible (2), form (2), width (2), variable (2), converted (2), ones (2), email (2), straight (2), cms (2), becoming (2), pasted (2), greeting (2), type (2), tip (2), monospaced (2), needs (2), now (2), matters (2), people (2), still (2), short (2), trailing (2), there (2), comment (2), cover (2), rule (2), guessing (2), prism (2), slack (2), server (2), actually (2), tutorial (2), included (2), inner (2), five (2), collides (2), itself (2), make (2), longer (2), parsers (2), continuation (2), dev (2), breaks (2), half (2), around (2), label (2), log (2), stack (2), keywords (2), turning (2), purpose (2), tells (2), sum (2), colours (2), php (2), templates (2), java (2), rust (2), matter (2), files (2), session (2), console (2), scripts (2), typed (2), javascript (2), node (2), knowing (2), case (2), def (2), greet (2), old (2), tab (2), rules (2), edit (2), whitespace (2), written (2), won (2), skip (2), opened (2), closes (2), tildes (2), tilde (2), between (2), anything (2), phrase (2), whole (2), asterisks (2), quote (2), made, taiwan, rights, reserved, terms, service, privacy, policy, search, contact, blog, company, compared, template, free, private, deepest, web, scannable, compatibility, dialect, gave, adds, explained, order, worked, learning, gfm, converts, related, spelling, extension, both, notepad, textedit, formatted, drop, our, rename, apps, recognise, sight, opens, level, newline, row, move, multi, below, pad, show, whatever, recognises, hundred, everyday, set, without, guess, stopped, working, moment, did, turn, directly, command, create, frequently, asked, questions, support, verified, writing, should, check, against, blaming, quick, javascipt, displayed, unless, sits, flush, margin, correct, step, pane, commit, zero, indents, tabs, identical, ordinary, non, breaking, copying, google, docs, drags, along, invisible, passengers, curly, compiler, accepts, may, have, been, arrived, though, chat, macos, system, wide, substitution, applies, dash, fails, baffling, fixed, strongest, argument, drafting, pull, request, description, consumes, entire, tell, unmistakable, enormous, certain, downward, died, count, big, spectacular, genuinely, shortened, nobody, understand, tempts, wrapping, screenshot, worse, since, copied, searched, aloud, image, pre, trim, down, part, urls, shorten, placeholder, obvious, split, calls, across, break, backslash, renderers, 200, becomes, scrollbar, sees, third, swipes, under, roughly, habits, practical, consequence, notice, specific, mark, keyword, grey, communicated, each, let, carry, meaning, follows, runs, carries, leaves, untagged, varies, clients, boxes, until, plug, yourself, marked, picker, once, enable, hugo, jekyll, astro, docusaurus, grammars, hundreds, languages, side, gitlab, near, universal, separate, either, bundles, mechanism, behind, teaches, uses, alternative, alert, display, numbering, restarts, renumbering, classic, symptom, ended, continuing, watch, strict, happy, give, marker, governs, points, dependencies, bulleted, usually, ordered, mislead, ascii, diagrams, directory, trees, messages, sample, fed, trace, cheerfully, random, words, harder, easier, choosing, real, decision, fallback, note, unchanged, neutral, forgetting, diffs, total, reduce, price, extra, tooling, green, red, deliberately, none, txt, plaintext, changes, minus, patch, shown, headers, cpp, golang, queries, schema, mysql, postgresql, stylesheets, less, scss, markup, svg, xml, pipelines, kubernetes, front, yml, api, responses, jsonc, including, prompt, zsh, python3, react, components, tsx, typescript, typical, called, hands, chroma, strings, comments, practice, unrecognised, harmless, simply, uncoloured, always, insensitive, immediately, converting, mechanical, select, strip, shift, treat, fight, arrives, unindented, hand, copy, makefiles, care, adding, mentally, subtracting, again, unforced, nowhere, works, meet, overflow, decade, ago, anyway, reasons, git, status, branch, main, back, normal, original, 2004, had, was, some, glue, surrounding, paragraph, twenty, minutes, confusion, least, decide, whether, cleanly, situation, wrapper, keeps, colliding, convention, mix, job, preserved, came, supported, essentially, pen, product, stand, gives, screen, signal, like, reserve, filenames, keys, tags, emphasis, documentation, proper, link, italics, things, could, padding, delimiters, strips, produces, lone, absurd, time, also, span, double, appear, however, many, takes, shows, underscore, italicise, middle, displays, mean, escape, hatch, div, my_var_name, stays, font, processing, switched, swallows, destructive, but, survives, last, updated, survive, untouched, stop, interpreting, quoting, collapsed, covers, quietly, swallow, test, home,
Text of the page (random words):
our space indented block and why fences won language identifiers and syntax highlighting identifiers worth knowing diff blocks turning highlighting off on purpose code blocks inside lists and fences inside fences inside a list item showing a fence inside a fence where highlighting actually happens line length and horizontal scroll common mistakes and how to fix them the unclosed fence smart quotes pasting from a word processor the fence that is indented too far language name typos inline code with single backticks in short single backticks quote a phrase inside a sentence three backticks on their own lines quote a whole block everything between the fences survives exactly as typed indentation and markdown characters included a language name after the opening fence turns on highlighting and an unknown name costs you nothing but colour an opening fence with no closing fence swallows the rest of the file the most destructive error in markdown wrap anything in single backticks and it renders in a monospaced font with all markdown processing switched off inside it run npm install first then edit config json the bold example stays literal in here that second line is the whole point inside backticks bold shows as four visible asterisks an underscore in my_var_name does not italicise the middle a div displays as text instead of becoming html inline code is the escape hatch for any character that would otherwise mean something when your code contains a backtick use more backticks on the outside than appear on the inside two three however many it takes use the character to start a code span the double case needs three if your content starts or ends with a backtick add one space of padding just inside the delimiters the renderer strips exactly one leading and one trailing space so produces a lone backtick it looks absurd the first time it is also how every markdown tutorial is written what inline code is not for it is not a highlighter pen using backticks to make a product name stand out gives a screen reader the wrong signal and makes your prose look like a config file reserve it for literal things a reader could type or paste commands filenames function names keys html tags for emphasis use bold or italics and to point at documentation use a proper link fenced code blocks for anything longer than a phrase open and close with three backticks on their own lines def greet name return f hello name everything between the fences is preserved exactly indentation blank lines punctuation and every character that would otherwise be markdown fenced blocks came from github flavored markdown and are now supported by essentially every renderer worth using tilde fences three tildes do the same job console log same result tildes matter in one situation when the code you are showing contains a backtick fence of its own a wrapper around markdown that itself contains keeps the two from colliding otherwise backticks are the convention you cannot mix them on one block because a fence opened with backticks must close with backticks fence length and blank lines two rules decide whether a block closes cleanly the closing fence must be at least as long as the opening one so a block opened with four backticks closes with four or more leave a blank line before the opening fence and after the closing fence skip that blank line and some parsers glue the block into the surrounding paragraph it is a five second fix that costs people twenty minutes of confusion the four space indented block and why fences won the original 2004 markdown had no fences a code block was any run of lines indented by four spaces or one tab here is an example git status on branch main back to normal prose it still works in every renderer and you will meet it in old readme files and in stack overflow answers written a decade ago use fences anyway for four reasons no language identifier an indented block cannot be syntax highlighted because there is nowhere to say what language it is indentation is data python yaml and makefiles care about leading whitespace adding four spaces to every line and mentally subtracting them again is an unforced error copy paste breaks it pasted code arrives unindented so you re indent every line by hand after every edit it collides with lists inside a list item four spaces already means continuation of this item which makes the two rules fight treat the four space form as something to read not something to write tip converting an old file is mechanical select the block strip four spaces from every line wrap it in fences then add a language name most editors do the de indent with a single shift tab language identifiers and syntax highlighting write the language name immediately after the opening fence with no space python def greet name return f hello name that word is called the info string the renderer hands it to a highlighter such as prism highlight js or chroma which colours keywords strings and comments identifiers are case insensitive in practice an unrecognised one is harmless because you simply get an uncoloured block guessing costs nothing so always label the block identifiers worth knowing identifier common aliases typical use javascript js node browser and node js code typescript ts tsx typed javascript react components python py python3 scripts data work examples bash sh shell zsh shell commands and scripts console shell session a terminal session including the prompt and its output json jsonc config files api responses yaml yml ci pipelines kubernetes front matter html xml svg markup and templates css scss less stylesheets sql postgresql mysql queries and schema go golang go source rust rs rust source java java source c cpp c cc h c and c source and headers php php source and templates markdown md markdown source shown as an example diff patch changes with coloured plus and minus lines text plaintext txt none deliberately no highlighting diff blocks the diff identifier colours lines by their first character green for red for it turns a code block into a before and after with no extra tooling diff function total items return items length return items reduce sum i sum i price 0 note the leading space on unchanged lines that space is what tells the highlighter to leave them neutral and forgetting it is why half coloured diffs look wrong turning highlighting off on purpose label a block text when colour would mislead log output ascii diagrams directory trees error messages sample data a highlighter fed a stack trace will cheerfully colour random words as keywords which makes the output harder to read rather than easier choosing text is a real decision not a fallback code blocks inside lists and fences inside fences inside a list item a fence inside a list must be indented to line up with the item s text or the list breaks in half around it for a bulleted list that is usually two or three spaces for an ordered list three or four 1 install the dependencies bash npm install 2 start the dev server bash npm run dev the rule is the same one that governs all continuation content in markdown lists three points cover it indent to the first character of the item s text never to the marker give the opening and closing fence the same indentation leave a blank line before the fence to keep strict parsers happy watch out get the indent wrong and the numbering restarts at 1 after the block that renumbering is the classic symptom and it means the list ended at the fence rather than continuing through it showing a fence inside a fence to display markdown that itself contains a code block make the outer fence longer than the inner one four backticks outside three inside markdown here is how to write a code block js alert hi this is the mechanism behind every tutorial that teaches markdown this page included if the inner content already uses four backticks use five outside the alternative is a outer fence which never collides with backticks at all where highlighting actually happens fences are near universal colour is not because highlighting is a separate library that the platform either bundles or does not platform fenced blocks syntax highlighting the editor on this site yes yes for any fence with a language tag github gitlab yes yes hundreds of languages server side vs code preview yes yes using the editor s own grammars hugo jekyll astro docusaurus yes yes once you enable a highlighter in config obsidian notion yes yes with a language picker discord slack yes discord yes slack no plain marked or markdown it output yes no until you plug in prism or highlight js yourself email clients most cms comment boxes varies no the preview here follows the same rule as the rest of that table it runs highlight js on any fence that carries a language tag and leaves an untagged fence plain rather than guessing the language the practical consequence never let colour carry meaning if the reader must notice one specific line say so in the prose above the block or mark it with a comment inside the code a highlighted keyword that renders grey somewhere else has communicated nothing the discord guide and the notion guide cover what each app does with a fence line length and horizontal scroll code blocks do not wrap in most renderers a 200 character line becomes a horizontal scrollbar and on a phone the reader sees the first third and swipes for the rest keep example lines under roughly 80 characters four habits get you there break long shell commands with a trailing backslash split long function calls across several lines shorten placeholder variable names to something short and obvious trim example urls down to the part that matters if a block genuinely cannot be shortened say what matters in the prose so nobody has to scroll to understand the point this is where raw html tempts people into a wrapping pre tag pasting a screenshot is worse still since an image of code cannot be copied searched or read aloud common mistakes and how to fix them the unclosed fence this is the big one and it is spectacular when it happens broken js const a 1 everything after this point is now code headings lists links all swallowed an opening fence with no matching close consumes the entire rest of the document the tell is unmistakable the page turns into one enormous monospaced block from a certain point downward scroll up to where the formatting died and add the missing a closing fence needs its own line with nothing else on it so const a 1 does not count tip a live preview catches an unclosed fence the second you type it that is the strongest argument for drafting in the editor rather than straight into a pull request description smart quotes broken const greeting hello fixed const greeting hello curly quotes are not the same characters as straight ones and no compiler accepts them your markdown renderer will not convert them inside a code block the text may have been converted before it arrived though by a word processor a chat app a cms editor or macos system wide substitution the same applies to becoming a dash if pasted code fails with a baffling syntax error look at the quotes first pasting from a word processor copying code out of word google docs or an email drags along invisible passengers non breaking spaces that look identical to ordinary ones tabs converted into variable width indents zero width characters with no visible form at all smart punctuation as above the result looks correct and does not run paste through a plain text step first a text editor a terminal or the left pane of this site s editor where you can see the raw characters before you commit them the fence that is indented too far broken js const a 1 four spaces at the start of a line already means indented code block so the fence characters get displayed as literal text unless the block sits inside a list item keep fences flush with the left margin language name typos writing javascipt costs you the colour and nothing else so nothing looks broken if a block that should be coloured is not check the info string against the table above before blaming the platform for everything else see the complete markdown guide the quick reference table or the faq support data verified 2026 07 24 frequently asked questions how do i create a code block in markdown put three backticks on a line of their own your code underneath then three more backticks on their own line add a language name directly after the opening fence such as python to get syntax highlighting for a single word or command inside a sentence use single backticks instead why did the rest of my document turn into code an opening fence somewhere above has no matching closing fence so it swallowed everything after it scroll up to the point where formatting stopped working and add the missing on its own line a live preview catches this the moment it happens which language identifiers can i use whatever your renderer s highlighter recognises which on github is several hundred names plus aliases the everyday set is js ts python bash json yaml html css sql and diff an unknown identifier just renders without colour so a wrong guess costs nothing how do i show backticks inside inline code use more backticks on the outside than on the inside and pad with a space if the content starts or ends with one two outer backticks wrap content containing a single backtick three wrap content containing two and so on do code blocks work inside tables only inline code does a fenced block is a block level element and cannot live inside a table cell where a newline ends the row put single backtick code in the cell and move any multi line example to a fenced block below the table what opens a markdown file any text editor a markdown file is the same thing as a md file only with the long spelling of the extension and both are plain text underneath notepad textedit vs code obsidian and your phone s notes app all open one with nothing to convert and nothing to install to read it formatted instead of raw drop it into our markdown viewer or rename it to md so more apps recognise it on sight related answers see how fenced code converts to html code blocks in discord syntax highlighting in gfm keep learning the complete markdown guide every element in the language explained in order with worked examples github flavored markdown the dialect that gave markdown fenced code blocks and what else it adds markdown cheat sheet all the syntax on one scannable page with platform compatibility notes try the editor try the editor md editor tw a free private in browser markdown editor with live preview plus the deepest markdown reference library on the web tools markdown to html table generator markdown to pdf markdown viewer html to markdown table to markdown toc generator learn what is markdown markdown guide cheat sheet github flavored markdown markdown vs html reference markdown syntax markdown tables markdown lists markdown links markdown images markdown headings bold italic code blocks blockquotes footnotes...
|
