Embed Codes on Dev.to Using Liquid Syntax with Runner

Rmag Breaking News

Instead of images from carbon or using code highlighting there is one more interactive way to show the code with preview and code runner. So that people can also edit and see the results for satisfaction and clarity.

See Markdown behind this Post :-https://dev.to/api/articles/sh20raj/embed-codes-on-devto-using-liquid-syntax-with-runner-3hl4

{% embed https://… %}

Embed JavaScript

runkit

// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42

// visible, reader-editable JavaScript code goes here
let i = 23;
console.log(hiddenVar,i)

Embed Python

Stackblitz

Embed HTML

Glitch

Codepen

Alternatives – JSFiddle, JSitor…

Php/Typescript

Replit

Gist

Many of the services are allrounder like stackblitz, CodeSandbox and replit . So you can edit many programming languages

You can embed Python code or use it as a Python runner in the following platforms:

CodePen
CodeSandbox
GitHub Gist, Issue or Repository
Glitch
JSFiddle
JSitor
Kotlin (as a language, can be used for Python)
Medium (in articles or stories)
Next Tech
Reddit (in code blocks or posts)
Replit
StackBlitz
Stackery
Stack Exchange or Stack Overflow (for sharing code snippets)
Twitch (for live coding)
Twitter (in code blocks or tweets)
Wikipedia (in code examples or articles, although not a typical use case)

These platforms either support embedding Python code directly or can be used for running Python code in various contexts.

For more you can refer to Editor Guide

Follow me on GitHub :- https://github.com/SH20RAJ?tab=repositories

💡 Tip: You can also use codepen, jsitor or jsfiddle with inside iframe code to add non – supporting website as iframe. i.e. <iframe src=”https://trinket.io/embed/python/edd948bf08″ width=”100%” height=”356″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ allowfullscreen></iframe>

Leave a Reply

Your email address will not be published. Required fields are marked *