How To Format Code on Medium

Formatting code on Medium can be done in a few different ways, depending on the level of readability and aesthetics you want. Here’s how you can format code effectively:

Learn How To Format Code on Medium Like A Pro

You can check the Medium format code and if you need more then you can comment.

1. Use Medium’s Built-in Code Block Feature

Medium provides a built-in way to format code snippets:

• Highlight the text you want to format as code.
• Click the </> (code block) button in the toolbar.
• This will format the text as a monospaced font, making it look like code.

Pros: Quick and easy.
Cons: Limited styling options (no syntax highlighting).

Read Also: How To Delete Reddit History

2. Use External Tools for Syntax Highlighting

If you want syntax highlighting (color-coded keywords, etc.), you can use external tools and then paste the formatted code into Medium:

• Tools to Use:
• Carbon: Create beautiful code snippets with syntax highlighting.
• Codeimg: Another tool for creating stylish code images.
• Highlight.js: This is for generating HTML with syntax highlighting.
• Steps:

1. Write your code in the tool.
2. Customize the theme, font, and background.
3. Export the code as an image or copy the HTML.
4. Paste the image or HTML into Medium.

Pros: Looks professional and visually appealing.
Cons: Code cannot be copied directly from the image.

Read Also: How To Use ChatGPT

3. Use GitHub Gists

If you want readers to be able to copy and interact with the code:

• Create a GitHub Gist (https://gist.github.com/).
• Paste your code into the Gist and save it.
• Copy the Gist’s embed link and paste it into Medium.

Pros: Readers can view and copy the code directly.
Cons: Requires readers to leave Medium to view the full code.

4. Manually Format Code

If you want more control over the formatting:

• Use backticks (`) for inline code, e.g., `print("Hello World")`.
• Use triple backticks (```) for multi-line code blocks:

  ```
  def hello_world():
      print("Hello World")
  ```

• Medium will render this as a code block.

Pros: Simple and works directly in Medium.
Cons: No syntax highlighting.

5. Use HTML/CSS (Advanced)

If you’re comfortable with HTML, you can manually style your code:

• Use <pre> and <code> tags for better control.
• Example:

  <pre style="background: #f4f4f4; padding: 10px; border-radius: 5px;">
  <code>
  def hello_world():
      print("Hello World")
  </code>
  </pre>

Pros: Full control over styling.
Cons: Requires HTML knowledge and may not render perfectly on all devices.

6. Use a Code Embedding Tool

Tools like Codepen or JSFiddle allow you to embed interactive code snippets:

• Create your code snippet on the platform.
• Use the embed feature to paste it into Medium.

Pros: Interactive and great for live examples.
Cons: Only works for web-based code (HTML, CSS, JS).

Best Practices for Formatting Code on Medium

• Keep code snippets concise and relevant to the topic.
• Add comments or explanations within the code to make it easier to understand.
• Use consistent formatting (e.g., indentation, spacing).
• If the code is long, consider linking to a GitHub repository or Gist.

By following these methods, you can ensure your code is both readable and visually appealing on Medium!

People’s Also Ask – How To Format Code on Medium