# Medium Post Formatting Guide - Cody Towstik - Medium

By [nj](https://paragraph.com/@nj-2) · 2023-06-22

---

A detailed exploration of all the features you need to know and understand when writing a post on Medium.
---------------------------------------------------------------------------------------------------------

![Cody Towstik](https://storage.googleapis.com/papyrus_images/8c5e61b1bc6454bba1b8d2e465a49f36c7ec70d20d6fe2e2c9bf44a3223661fd.jpg)

Cody Towstik

Excited to start writing on Medium and aren’t sure of the details? Maybe you’ve already created a story or two and want to take your game to the next level. This guide is for _YOU_.

This guide will cover the features available to you when writing a story on Medium. Each feature covered in this post has an explanation of how to use it, a _live_ example of it in action, and offer some tips n’ tricks as we go.

For more detail, see the official [Medium Help Center](https://help.medium.com/), you might want to check out the [writing](https://help.medium.com/hc/en-us/categories/200058025) section. Relevant links to specific parts of the documentation will be provided as we go.

Table of Contents
-----------------

(Links to other parts of the same story only work on desktop!)

1.  Setting a Title
    
2.  Inline TooltipMenuAdd an ImageAdd an Image From UnsplashAdd VideoAdd an Embed (with embedding Code and Polls examples)Add a Part
    
3.  Formatting MenuBold & ItalicsHyperlinksHeadersSubheadersQuotesPrivate Note
    
4.  Additional ElementsListsCodeDropcapsDashes ( — )EmojisSuperscriptMentions‘Edit Later’ Reminders
    
5.  ExtrasSpacingKeyboard ShortcutsFootnotesMathWord CountShared Draft
    

Setting a Title
---------------

[https://help.medium.com/hc/en-us/articles/214895188-Custom-titles-subtitles](https://help.medium.com/hc/en-us/articles/214895188-Custom-titles-subtitles)

The first Heading (big **T**) in your story is set as the Title. The first subheading (little T) becomes the Subtitle. If you accidentally delete your title, just make a new one at the top and make that line a Heading using the formatting menu.

You can change the title that is displayed in previews on Medium and on social media posts in the triple-dot more options menu above, selecting `Change display title/subtitle`.

The title (and subtitle) you see at the top can be different than what you set in the aforementioned settings menu.

Inline Tooltip Menu
-------------------

The tooltip menu only appears if your cursor is focused on an empty line. We’ll call these ‘blocks’.

Add An Image
------------

[https://help.medium.com/hc/en-us/articles/215679797-Images](https://help.medium.com/hc/en-us/articles/215679797-Images)

> It should be an image that you have the rights to use. Free-use resources like Pexels, Pixabay, Unsplash, and the Gender Spectrum Collection are great for sourcing Creative Commons-licensed images.
> 
> [Medium Docs](https://help.medium.com/hc/en-us/articles/360006362473)

You can click the tooltip menu camera icon, or drag n’ drop multiple pictures directly. The editor supports images up to 25MB in `JPG`, `JPEG`, `GIF`, and `PNG` formats.

To remove an image, just click on it and press `Delete` or `Backspace` on your keyboard.

> While images in Medium posts will appear differently whether viewed on web, mobile web, iOS and Android apps, below are some guidelines for image dimensions in posts. **If you use too small an image, neither Medium nor other social networks will be able to pull a featured image for a preview.**
> 
> [_Medium Docs_](https://help.medium.com/hc/en-us/articles/215679797-Images)

Here the recommended sizes for images being used in the following ways:

*   **Left-aligned images:** 700px
    
*   **Full column-width images:** 1400px wide
    
*   **Out-set images:** 2040px wide
    
*   **Screen-width images**: 2500px wide
    

Your image needs to be at least \*\*\*1060 px \*\*\*wide for all four placement options to show up.

Don’t forget: your story will be displayed in many different formats. On mobile, all pictures are pretty much the same size. That means left-aligned images won’t wrap text.

Images will be try to be resized to keep their original scale, but I would edit them beforehand to resize and crop images before using them in Medium. Also, be careful using huge white images because mobile users have access to a Dark Mode app, you don’t want to blind them.

Here is an example of each image type, if you’re on mobile these will probably all look the same to you (see the captions!)

![](https://storage.googleapis.com/papyrus_images/62b457d54be8f7940c67f8ad7bac7ca95f73299ccfcd900af5c90649defdf1b7.webp)

Left-Aligned Image

**Left-aligned** images can have text wrapped on the side of them.

Be careful though, if there is text below a left-aligned imaged, all of the vertical white space next to the image will be collapsed, which may move your text unexpectedly upwards.

![](https://storage.googleapis.com/papyrus_images/1296cd20268a96ba4cd55a2c0d4552582efc8d86583bf0fa11931b8a1ec03790.gif)

Left-aligned Image

**Column-width** images are sized to take up the entire width of the column that the text can be on. Notice how the text wraps right where the border of the images are. If the original image is too small, it will not be sized up to fit the entire column. Except on mobile, where smaller images may expand to fit the size of the screen.

![](https://storage.googleapis.com/papyrus_images/62b457d54be8f7940c67f8ad7bac7ca95f73299ccfcd900af5c90649defdf1b7.webp)

Column-width Image

![](https://storage.googleapis.com/papyrus_images/51236ab313a443a00541390eb9bc4280e71cf1b38274b3a5147d08aec8ff1478.webp)

Column-width: a small image in it’s original upload size.

\*\*Outset-width \*\*images scale up to just a bit beyond the column width.

![](https://storage.googleapis.com/papyrus_images/5bbeabcbc53e52aae4b0c13bafe71bcd42a87861b8872d501c0922e6798b05ca.webp)

Out-set Image

**Screen-width** images are the only image type that will get bigger as the window is resized, to take up the whole screen. As the screen gets smaller, all images will scale accordingly.

![](https://storage.googleapis.com/papyrus_images/04f639bffd4a0b95c6660d1fdc1eea68c771331cf8e4df3ff4d541d142289ddf.webp)

**Screen-width**

Pictures can have captions, which can contain links. It is a useful way to link back to the source of the image.

![](https://storage.googleapis.com/papyrus_images/62b457d54be8f7940c67f8ad7bac7ca95f73299ccfcd900af5c90649defdf1b7.webp)

A sample caption with a link to the source, which takes up a single line and automatically wraps if the text is too long. (Source: [u/salt\_watercolors](https://www.reddit.com/user/salt_watercolors/))

Make an image a link by clicking on it, and then pressing `Ctrl/Cmd + K`

If you upload multiple images at a time (via drag n’ drop or file explorer), it will automatically create a grid. Images are placed initially in alphabetical order of their files names.

If you upload too many photos to fit on one line, Medium will tile it in a multi-line grid. Images are resized to keep their original proportions at best-effort. You can drag n’ drop tile items to arrange them how you want. Medium is a little finicky with how they scale if the images on a row can’t fill the entire width of the page margin.

Once published, readers can click one each image independently to view a larger version.

Add an Image From Unsplash
--------------------------

![](https://storage.googleapis.com/papyrus_images/23b399df0c8f631bf76cc50175cdfd676e0b5f2ce0840a8e73bd88b4d93ad430.jpg)

This image is the focal. Photo by [Annie Spratt](https://unsplash.com/@anniespratt?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

Unsplash images can be resized like regular images and are automatically captioned. You can only add one at a time, but you can drag them into a grid.

Only text can appear next to images. Not another block type such as video or an embed.

Use `shift + F` to make an image your featured image (for social media and thumbnails), and `option/alt` + `click` to set the focal point. That way cropped versions if your feature image are cropped properly.

For example, the image of the fox drawing from Unsplash is the featured image of this article, with the center as the focal point.

Clicking on the image after setting a focal point, you will see a green circle that represents the current focal point.

> You can also add alt text to your image that serves as brief description of this image for readers with visual impairments
> 
> [Medium Docs](https://help.medium.com/hc/en-us/articles/215680047-Featured-image)

Add Video
---------

Paste a YouTube, Vimeo, or Vine (lol) link, and press enter.

Not seen here: videos can be resized like images. Even full-screen width.

This is YouTube .

It’s funny that ‘Vine’ is still an option now that it doesn’t exist.

This is a Vimeo.

Add an Embed
------------

[https://help.medium.com/hc/en-us/articles/214981378-Embeds](https://help.medium.com/hc/en-us/articles/214981378-Embeds)

Medium uses a third party service called [Embed.ly](http://embed.ly/) to embed content. Embedly supports [over 700 service providers](http://embed.ly/providers), and has a [documented process](http://embed.ly/providers/new) for getting your own content embeddable through their service.

> Embedding with the embed code is not supported. To embed content on Medium, all you need is the URL. For example, to embed a Tweet, paste the direct URL of the Tweet and press Enter.
> 
> [Medium Docs](https://help.medium.com/hc/en-us/articles/214981378)

See the Medium documentation for a list of popular embeds. Note that since you are just copying the link rather than using a standard embed `<script>` or `<iframe>` tag, you don’t get the full embed options provided by most embed providers. Also, a lot of the interactivity provided by the embeds doesn’t work until the article is published. To test out your embeds, publish your story first as ‘unlisted’ to make sure everything is kosher.

For example, you can embed code stored by other service providers directly in your article. Some popular third-party embeds: [Github Gists](https://gist.github.com/), [Codepen.io](http://codepen.io/), [JSfiddle](https://jsfiddle.net/).

This is Github Gists.

You can add a caption, too!

This is Codepen.io (notice that you need to click ‘Run Pen’ first).

This is JSFIddle.

Add a Part
----------

Shortcut: `ctrl + Enter`

Adding a new ‘part’ renders a horizontal rule of ellipses (seen below).

Formatting Menu
---------------

The formatting menu only appears if you highlight text.

Bold & Italics
--------------

Bold shortcut: `ctrl + B` Italics shortcut: `ctrl + I`

You can **bold** and _italicize_ text if it isn’t a header. Text can be both **_bold and italic_** at the same time. Headers and Subheaders can’t be bold nor italic.

> Quotes can be **bolded**, and are italic by default.\* Italicizing them reverses the **default** styling.\*

Hyperlinks
----------

Shortcut: `ctrl + K`

[You can turn arbitrary text into a hyperlink.](https://help.medium.com/hc/en-us/articles/215194537-Format-text) They are always opened in a New Tab. Deleting text doesn’t break the hyperlink. Text added after the existing link doesn’t make the new text a part of the existing link, but you can add text in in between the first and last letter.

In order to change the display text or the link itself, you need to highlight the existing link and remove the current hyperlink to update the link text

If you just paste a link on an empty line, Medium will make a best-effort attempt at rendering a\* bookmark widget \*with a summary. Take a look at the source websites for each of these links to see how Medium has tried to generate a title, summary, and icon.

It seems like Medium uses the [Open Graph protocol](https://ogp.me/) to determine the thumbnail image and summary. For software people, that means setting the meta tags with `og` properties — `og:title` , `og:description`,`og:url` , `og:image` — on the website. For links to Medium posts, that will be the Title, Subtitle, URL, and ‘Featured’ image.

Seen from [sindresorhus.com](https://sindresorhus.com/) and clicking ‘View Source’:

    # From the 
    <meta property="og:title" content="Sindre Sorhus"><meta property="og:url" content="https://sindresorhus.com/"><meta property="og:description" content="Full-Time Open-Sourcerer & Aspiring Rebel"><meta property="og:image" content="https://sindresorhus.com/sindre-sorhus.jpg">
    

To delete a bookmark embed, just highlight the whole thing and press `Backspace` or `Delete`

Notice how I was able to edit the title, summary, and link preview for the generated embedded bookmarks.

Headers
-------

Create a header using the big ‘T’ option (like **Formatting Menu** TK(link) above). The first header in the document will be the ‘Title’.

Subheaders
----------

Are created using the smaller ‘T’ option. A subheader directly below the ‘Title’ header will be the ‘Subtitle’.

Since there are only two levels of headers, you can only create a layout schema like the following:

*   Title
    
*   Subtitle
    
*   — Heading 1
    
*   — — Subheading 1
    
*   — — Subheading 2
    
*   — Heading 2
    
*   — — Subheading 1
    
*   — — Subheading 2
    

Quotes
------

Shortcut: `ctrl + alt + 5`

Toggle a block of text into either style of quote by highlighting any text in the quote and choosing the ‘quote’ format option again. If two quotation marks are highlighted in the formatting menu, clicking the ‘quote’ option again will remove quotes.

> There are two styles of quotes.
> 
> They can [have links](https://help.medium.com/hc/en-us/articles/360009297694).

…

> There are two styles of quotes.
> 
> They can [have links](https://help.medium.com/hc/en-us/articles/360009297694).

…

> A new line has slightly more spacing than the line height when a quote wraps.
> 
> As you can see.

…

> This style of quote can be **bolded**, and\* italicizing reverses the **default** styling.\*

…

> This style of quote can’t be bolded or italicized. If this quote gets too long it will wrap, too.

Private Note
------------

You can make a private note on a line that only you and publications the article is posted to can see.

There can be multiple private notes on the same line. Since this story is already published, you can’t see the private note attached to this line.

Additional Elements
-------------------

Lists
-----

*   There are two styles of lists. This style of list is created by typing an asterisk (\*) and `Space`
    
*   Lists can not be nested, and only have one level.
    

1.  This style of list is created by typing `1` + period (.) and `Space`
    
2.  It automatically increments.
    
3.  If you press `enter` and the list item is empty, the list stops incrementing and the empty line disappears.
    
4.  Numbered lists cannot be continued after a section break or between images.
    
5.  If you press `Enter` after a list item in the middle, you can insert empty lines, but they are automatically removed during the publish process.
    

Code
----

Native inline code and code blocks do not have any syntax highlighting. To get syntax highlighting, you must use an [embed provider](https://help.medium.com/hc/en-us/articles/214981378).

> Medium does not allow users to insert and run scripts into the site for security and privacy reasons.
> 
> [Medium Docs](https://help.medium.com/hc/en-us/articles/214981378-Embeds)

You can `inline` code by typing a backtick (\`) and then typing your code. Press backtick again to exit out of inline code editing mode, or move your cursor out with the mouse or arrow keys.

To enter inline code editing mode, there\` needs\` to\` be a space before the backtick `before you put the` backtick.

To make existing text inline code, highlight it and press `backtick` . To use a backtick in code, use this method ` `` ` to wrap existing backticks.

Code blocks can be made by typing three backticks (\`\`\`) in a row, or using the shortcut `ctrl + alt + 6`

    This is a code block. It uses a monospaced font called Menlo, with a fallback to Monaco.New lines are automatically generated when you press enter, and there is the same amount of space between new lines and wrapped text.The previous line wraps.
    These two do not.There can be multiple blank lines in code blocks.
    

Dropcaps
--------

Drop caps can be added to a paragraph by selecting an entire paragraph and clicking on the drop caps icon in the formatting menu. A drop cap takes up two full lines of height. On mobile, they appear as regular text.

![A](https://storage.googleapis.com/papyrus_images/3676a98367223ad47e074e0866116522151d821119a2d9da08d1d3212477438a.png)

A

Notice how the emoji drop cap takes up **four** lines of height (on my screen) rather than two. If you delete a drop cap, typing a capital letter at the start of that line will make the new letter the drop cap.

![A](https://storage.googleapis.com/papyrus_images/91001737f9abf57419ee63bb2695167d499575896ec5f5cd650a4565748ff66b.png)

A

You can use any image type as a drop cap, even a `gif`.

![T](https://storage.googleapis.com/papyrus_images/1296cd20268a96ba4cd55a2c0d4552582efc8d86583bf0fa11931b8a1ec03790.gif)

T

![](https://storage.googleapis.com/papyrus_images/1296cd20268a96ba4cd55a2c0d4552582efc8d86583bf0fa11931b8a1ec03790.gif)

This is an image formatted to wrap text.

This is an image of the same `gif`.

Dashes
------

Pressing the hiphen (-) button twice in a row will generate — a dash.

You can’t put — additional — spacing after a dash.

Pairs of dashes will continue to be converted into dashes — — —

Emojis 😜
---------

Medium supports the same emoji syntax as services like GitHub and Slack. Here is a [cheat sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) for all available emojis. They can appear in any Header or Subheader, even the main Title and Subtitle.

To add an emoji, type colon (:) and the name of your favorite emoji — `:star` .

I’d give this article a rating of ⭐ ⭐️ ⭐️ ⭐️ ⭐️.

You can copy and paste emojis to quickly make duplicates.

Superscript
-----------

Medium supports superscript for numbers only. To output a number, such as 6⁷ just type in `6^7` , words⁵ can have numeric superscripts too using `words^5` .

The number will continue to be superscripted as long as you don’t add a non-numeric character, like a space, special character, or letter.

You can click back into a superscript⁵⁴ ⁴⁴⁵ ⁴ number and add spaces in between, or additonal numbers.

If you delete the word¹²³ that has superscripts, you can put a space or dash before the superscript — ⁵⁵⁵.

Mentions
--------

Mention someone by typing `@name` or `@username` . The tag will be replaced with their name — [Cody Towstik](https://medium.com/u/cac1394e55b8?source=post_page-----77e9f8307d32--------------------------------).

Tagged users will get a notification after you publish.

‘Edit Later’ Reminder
---------------------

Including the characters TK anywhere on a line will leave a [TK reminder](https://medium.com/@Medium/what-is-tk-30dfec2921b5). It adds a little `TK` icon to the left of the line and serves as a reminder to the author to come back and make a future change.

Medium will warn you if there are any remaining TK reminders left before you publish.

Extras
------

Spacing
-------

You can make a single-spaced line break by going to the end of the line and pressing `Shift + Enter` at the same time. This is only available on desktop.Like.This.There.Is.Less.Space.Between.Lines.

Extra white space is collapsed when your article is published, so make sure to take a look at it after. If you have multiple blank new lines or a list with an empty element, all of that will be removed.

Keyboard Shortcuts
------------------

[https://help.medium.com/hc/en-us/articles/215194537-Format-text](https://help.medium.com/hc/en-us/articles/215194537-Format-text)

You can pop up the help menu while editing using `ctrl + ?` which lists some of the relevant shortcuts at the bottom of your screen.

Use `ctrl + shift + /` to get `ctrl + ?`.

Footnotes
---------

¹Medium doesn’t support footnotes²But you can use superscript³And use `shift + enter` to mock footnotes at the bottom of your post.

Math
----

Medium doesn’t support math, but there is a [user guide on using Unicode characters for maths on Medium](https://medium.com/@tylerneylon/how-to-write-mathematics-on-medium-f89aa45c42a0#.tb4rw3gqc).

Since medium uses Embed.ly for their embeds, you could use one of the existing embeds that support \*LaTeX \*to render complex math.

Word Count
----------

Select a portion of text, or the entire article with `ctrl + a` , and a word count will appear in the top left.

Shared Draft
------------

You can share a draft with another user so they can edit add notes. If you add notes to another users article, you will [get a thank you note](https://help.medium.com/hc/en-us/articles/215559678-Thank-you-notes-on-posts) at the bottom of the article at the time of publish.

If you’d rather not be mentioned, click Hide near your mention to hide it for other readers.

Additional Thoughts
-------------------

*   Some of the UI is a little wonky. Since editing mode doesn’t provide a one-to-one preview of how the article is going to be published, you’ll probably want to publish the article as unlisted first.Use the triple-dot more options menu above and select `Manage Unlisted Setting` .
    
*   It would be nice if there was support for additionally nesting some elements like lists and sub-sub-headers (think `H1` — `H4`), but it makes sense they aren’t included because Medium has a mobile-first design, which wouldn’t support heavy nesting.
    

I encourage you to check out the all of the links in the [Medium Help Center](https://help.medium.com/hc/en-us/categories/200058025) under ‘Writing’ because there is a lot of information to go through.

Some relevant cherry-picked links:

[https://blog.medium.com/tips-and-tricks-for-medium-writers-1d79498101c3](https://blog.medium.com/tips-and-tricks-for-medium-writers-1d79498101c3)

[https://help.medium.com/hc/en-us/articles/360018677974](https://help.medium.com/hc/en-us/articles/360018677974)

[https://help.medium.com/hc/en-us/articles/360006362473-Medium-s-Curation-Guidelines-everything-writers-need-to-know](https://help.medium.com/hc/en-us/articles/360006362473-Medium-s-Curation-Guidelines-everything-writers-need-to-know)

[https://help.medium.com/hc/en-us/articles/360019353634-Make-a-post-eligible-for-curation](https://help.medium.com/hc/en-us/articles/360019353634-Make-a-post-eligible-for-curation)

Note that stories about Medium (like this one) are not eligible for curation.

> Cheers, thanks for reading! 😊

> asd ASdas ADSsad AS d
> 
> as

ASD ASdas As

![](https://storage.googleapis.com/papyrus_images/1a5f74b9b63b657d3bb8e10e684c35ed87f821ebc6aeae3ea8f3f9826fb2aa5e.jpg)

![](https://storage.googleapis.com/papyrus_images/65b5035d98769e626966ad8ab341d24df1080d302817aecb799cefcaf36b55ec.jpg)

asdas

### sdfnskdlfnASDNfldfsdfDSf

---

*Originally published on [nj](https://paragraph.com/@nj-2/medium-post-formatting-guide-cody-towstik-medium)*