Friday, June 14, 2024
HomeTECHNOLOGYHow to add Html or Embed Code in Medium.com

How to add Html or Embed Code in Medium.com

Introduction:

For authors and content producers, Medium is an adaptable platform that lets you incorporate different kinds of material, such code snippets. Embedding code correctly may improve your Medium writings, whether you’re a writer providing programming insights or a developer demonstrating a topic. We’ll go over nine different ways to incorporate code in Medium in this in-depth article, so your technical writing stays readable, readable, and visually beautiful.

Table of Contents:

  1. 1) Inline Code Blocks
  2. 2) GitHub Gists
  3. 3) CodePen Embeds
  4. 4) JSFiddle Embeds
  5. 5) Embedding Code from Your Website
  6. 6) Using Code Block Embed Widgets
  7. 7) Google Code Prettify
  8. 8) Using Embedly Cards
  9. 9) Custom HTML Embeds

    1. 1) Inline Code Blocks:
      To add inline code blocks to your Medium post, use Markdown syntax.
      Code snippets should be enclosed in backticks (~) to preserve readability and formatting.

    2. 2) GitHub Gists:
      Put your little bit of code into a GitHub Gist.
      Copy and paste the GitHub embed script into the HTML editor of your Medium post.

    3. 3) CodePen Embeds:
      Use CodePen to demonstrate interactive code snippets.
      Using the Embed option in Medium, copy and paste the CodePen-provided embed code.

    4. 4) JSFiddle Embeds:
      JSFiddle lets you insert live code snippets, just like CodePen.
      Use JSFiddle to generate the embed code, then add it to your Medium article.

    5. 5) Embedding Code from Your Website:
      You may easily insert your code snippets into your Medium article if you host them on a personal blog or website.
      Paste the HTML embed code that your website’s hosting platform sent you into the HTML editor of your Medium post.

    6. 6) Using Code Block Embed Widgets:
      There are code block embed widgets available from several third-party providers that are made especially for Medium.
      Investigate websites like Embed.ly and Graphite that offer Medium-compatible code block embeds that can be customized.

    7. 7) Google Code Prettify:
      Use Google Code Prettify to beautifully style and format your code snippets.
      To include Code Prettify in your Medium post, go to the Google guide.

    8. 8) Using Embedly Cards:
      Code snippets are among the several content kinds for which Embedly provides cards.
      For your code snippet, create an Embedly card and copy and paste the HTML code supplied into your Medium article.

    9. 9) Custom HTML Embeds:
      For more intricate personalization, think about crafting unique HTML embeds for your code snippets.
      Create HTML code that has the proper functionality and styling, then add it to the HTML editor of your Medium article.

    1. Conclusion:
      Adding code samples to your Medium pieces makes technical information easier to read and understand. Using the many techniques covered in this tutorial, you may successfully embed code in Medium and appeal to readers who are not developers as well as those who are. Try out these strategies to see which one most successfully engages your audience and fits your content. Cheers to writing and coding on Medium!


RELATED ARTICLES

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments