Skip to main content

Dev.to Top Supported Embedding Liquid Syntax

Dev.to supports embedding various types of content directly into your articles to enrich the reading experience. Here are some embedding options that you can utilize:

  1. CodePen: You can embed interactive CodePen demos directly into your articles using the following syntax:

    {% codepen penId %}
    
  2. Gist: You can embed GitHub Gists into your articles using the following syntax:

    {% gist username/gistId %}
    
  3. YouTube Videos: You can embed YouTube videos into your articles using the following syntax (Instead of id you can use link of the video also) :

    {% youtube videoId %}
    
  4. Twitter Tweets: You can embed tweets from Twitter directly into your articles using the following syntax:

    {% twitter tweetUrl %}
    
  5. Spotify Playlists: You can embed Spotify playlists into your articles using the following syntax:

    {% spotify playlistUrl %}
    
  6. Instagram Posts: You can embed Instagram posts into your articles using the following syntax:

    {% instagram postUrl %}
    
  7. JSFiddle: You can embed JSFiddle demos directly into your articles using the following syntax:

    {% jsfiddle fiddleId %}
    
  8. SoundCloud Tracks: You can embed SoundCloud tracks into your articles using the following syntax:

    {% soundcloud trackUrl %}
    
  9. CodeSandbox: You can embed CodeSandbox demos directly into your articles using the following syntax:

    {% codesandbox sandboxId %}
    
  10. Twitch Streams: You can embed Twitch streams into your articles using the following syntax:

    {% twitch streamId %}
    

  1. Post

    {% post postLink %}
    
  2. Organization

    {% Organization OrganizationId %}
    
  3. link
    {% link Link %}
    
  4. User
    {% user userId %}
    
  5. Podcast
    {% podcast podcastId %}
    
  6. Comments
    {% devcomment 40fh %}
    

You can use the links instead of id's sometimes.

Dev.to also supports some HTML to be exicuted. summary, details, h1, img, br, video Tag etc. Remaining you can tell me in comments to modify and enhance the enhancing Article. These embedding options allow you to include a wide range of content directly within your articles on dev.to, making them more interactive and engaging for your readers. Also Supports some HTML Syntax.

Supported URL Embeds

  • DEV Community Comment
  • DEV Community Link
  • DEV Community Link
  • DEV Community Listing
  • DEV Community Organization
  • DEV Community Podcast Episode
  • DEV Community Tag
  • DEV Community User Profile
  • asciinema
  • CodePen
  • CodeSandbox
  • DotNetFiddle
  • GitHub Gist, Issue or Repository
  • Glitch
  • Instagram
  • JSFiddle
  • JSitor
  • Loom
  • Kotlin
  • Medium
  • Next Tech
  • Reddit
  • Replit
  • Slideshare
  • Speaker Deck
  • SoundCloud
  • Spotify
  • StackBlitz
  • Stackery
  • Stack Exchange or Stack Overflow
  • Twitch
  • Twitter
  • Twitter timeline
  • Wikipedia
  • Vimeo
  • YouTube

Comments

Popular posts from this blog

FamilyAlbum - Free Unlimited Storage - Share Family Photos and Videos - Auto-Organized Album

Website :- https://family-album.com Play Store :- https://play.google.com/store/apps/details?id=us.mitene Description from Play Store The best way to safely share and organize your family’s photos and videos. Unlimited storage, no ads, and it’s free! 3 Reasons to Start Your Album: 1) You’ll love it YOUR MEMORIES ON DISPLAY. Show off your photos and videos in a way that’s both beautiful and intuitive. Everything is automatically sorted by month, complete with your child’s age. Just swipe the screen to go back in time! UNLIMITED STORAGE. Back up all your memories for free. STREAMLINED SHARING. No more sharing the same photo with five different group chats. All your photos, all your videos, all your favorite people, all in one place. YOUR PRIVACY IS OUR PRIORITY. Your album is completely private. All content you upload to the app belongs to you, and it can only be viewed by you and the family and friends you invite. That also ...

Git Conflict Guide 🚀

What is a Git Conflict? A Git conflict occurs when two branches have changed the same part of a file, and Git cannot automatically merge the changes. When you attempt to merge or rebase branches, Git will pause the process and mark the conflicted files. Steps to Resolve a Git Conflict 1. Identify Conflicted Files When you encounter a conflict, Git will mark the conflicted files. You can see these files by running: git status Enter fullscreen mode Exit fullscreen mode 2. Open the Conflicted File Open the conflicted file(s) in your code editor. You'll see Git's conflict markers: <<<<<<< HEAD Your changes ======= Incoming changes >>>>>>> branch-name Enter fullscreen mode Exit fullscreen mode <<<<<<< HEAD marks the beginning of your changes. ======= separates your changes...

Random Posts