{"type_of":"article","id":1808522,"title":"Embed Codes on Dev.to Using Liquid Syntax with Code Runner","description":"Instead of images from carbon or using code highlighting there is one more interactive way to show...","readable_publish_date":"Apr 2 '24","slug":"embed-codes-on-devto-using-liquid-syntax-with-runner-3hl4","path":"/sh20raj/embed-codes-on-devto-using-liquid-syntax-with-runner-3hl4","url":"https://dev.to/sh20raj/embed-codes-on-devto-using-liquid-syntax-with-runner-3hl4","comments_count":1,"public_reactions_count":11,"collection_id":null,"published_timestamp":"2024-04-02T02:14:57Z","language":"en","subforem_id":null,"positive_reactions_count":11,"cover_image":null,"social_image":"https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Farg27kgoyyack52hau8z.png","canonical_url":"https://github.com/SH20RAJ?tab=repositories","created_at":"2024-04-02T02:14:58Z","edited_at":"2024-05-04T17:22:34Z","crossposted_at":null,"published_at":"2024-04-02T02:14:57Z","last_comment_at":"2024-04-06T02:05:57Z","reading_time_minutes":2,"tag_list":"javascript, beginners, programming, howtodevto","tags":["javascript","beginners","programming","howtodevto"],"body_html":"\u003cp\u003eInstead 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.\u003c/p\u003e\n\n\u003cp\u003e\u003ciframe width=\"710\" height=\"399\" src=\"https://www.youtube.com/embed/yEWLR9kcFPY\" allowfullscreen loading=\"lazy\"\u003e\n\u003c/iframe\u003e\n\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight python\"\u003e\u003ccode\u003e\u003cspan class=\"nf\"\u003eprintf\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"sh\"\u003e'\u003c/span\u003e\u003cspan class=\"s\"\u003eSome Python Here! 🔥\u003c/span\u003e\u003cspan class=\"sh\"\u003e'\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003cp\u003eSee Markdown behind this Post :-\u003ca href=\"https://dev.to/api/articles/sh20raj/embed-codes-on-devto-using-liquid-syntax-with-runner-3hl4\"\u003ehttps://dev.to/api/articles/sh20raj/embed-codes-on-devto-using-liquid-syntax-with-runner-3hl4\u003c/a\u003e | See on \u003ca href=\"https://codes20.github.io/95944e83e105c5c8f926ea6892705377\"\u003eCodes20\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003e\u003ccode\u003e{% embed https://... %}\u003c/code\u003e\u003c/p\u003e\n\u003ch2\u003e\n  \u003ca name=\"embed-javascript\" href=\"#embed-javascript\"\u003e\n  \u003c/a\u003e\n  Embed JavaScript\n\u003c/h2\u003e\n\u003ch3\u003e\n  \u003ca name=\"runkit\" href=\"#runkit\"\u003e\n  \u003c/a\u003e\n  runkit\n\u003c/h3\u003e\n\n\n\u003cdiv class=\"runkit-element\"\u003e\n  \u003ccode style=\"display: none\"\u003e\n    \n// hidden setup JavaScript code goes in this preamble area\nconst hiddenVar = 42\n\n  \u003c/code\u003e\n  \u003ccode style=\"display: none;\"\u003e\n    \n// visible, reader-editable JavaScript code goes here\nlet i = 23;\nconsole.log(hiddenVar,i)\n\n  \u003c/code\u003e\n\u003c/div\u003e\n\n\n\n\n\u003chr\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"embed-python\" href=\"#embed-python\"\u003e\n  \u003c/a\u003e\n  Embed Python\n\u003c/h2\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"stackblitz\" href=\"#stackblitz\"\u003e\n  \u003c/a\u003e\n  Stackblitz\n\u003c/h3\u003e\n\n\u003cp\u003e\u003ciframe src=\"https://stackblitz.com/edit/secret-python-svndnu?ctl=1\u0026amp;embed=1\u0026amp;file=main.py\u0026amp;hideExplorer=1\u0026amp;hideNavigation=1\u0026amp;theme=dark\u0026amp;view=editor\" width=\"100%\" height=\"500\" scrolling=\"no\" frameborder=\"no\" allowfullscreen allowtransparency=\"true\" loading=\"lazy\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"embed-html\" href=\"#embed-html\"\u003e\n  \u003c/a\u003e\n  Embed HTML\n\u003c/h2\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"glitch\" href=\"#glitch\"\u003e\n  \u003c/a\u003e\n  Glitch\n\u003c/h3\u003e\n\n\n\u003cdiv class=\"glitch-embed-wrap\" style=\"height: 450px; width: 100%;margin: 1em auto 1.3em\"\u003e\n  \u003ciframe sandbox=\"allow-same-origin allow-scripts allow-forms allow-top-navigation-by-user-activation allow-popups\" src=\"https://glitch.com/embed/#!/embed/?path=index.html\" alt=\" on glitch\" style=\"height: 100%; width: 100%; border: 0;margin:0;padding:0\" loading=\"lazy\"\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\n\u003ch3\u003e\n  \u003ca name=\"codepen\" href=\"#codepen\"\u003e\n  \u003c/a\u003e\n  Codepen\n\u003c/h3\u003e\n\n\u003cp\u003e\u003ciframe height=\"600\" src=\"https://codepen.io/SH20RAJ/embed/dyLZgJj?height=600\u0026amp;default-tab=result\u0026amp;embed-version=2\" scrolling=\"no\" frameborder=\"no\" allowtransparency=\"true\" loading=\"lazy\" style=\"width: 100%;\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\n\u003cp\u003eAlternatives - JSFiddle, JSitor...\u003c/p\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"phptypescript\" href=\"#phptypescript\"\u003e\n  \u003c/a\u003e\n  Php/Typescript\n\u003c/h2\u003e\n\n\u003ch3\u003e\n  \u003ca name=\"replit\" href=\"#replit\"\u003e\n  \u003c/a\u003e\n  Replit\n\u003c/h3\u003e\n\n\n\u003cdiv class=\"ltag__replit\"\u003e\n  \u003ciframe frameborder=\"0\" height=\"550px\" src=\"https://repl.it/@SH20RAJ/svg-pack?lite=true\" loading=\"lazy\"\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\n\u003ch3\u003e\n  \u003ca name=\"gist\" href=\"#gist\"\u003e\n  \u003c/a\u003e\n  Gist\n\u003c/h3\u003e\n\n\n\u003cdiv class=\"ltag_gist-liquid-tag\"\u003e\n  \u003cscript id=\"gist-ltag\" src=\"https://gist.github.com/SH20RAJ/70640802273639038942447c650fcc64.js\"\u003e\u003c/script\u003e\n\u003c/div\u003e\n\u003cbr\u003e\nMany of the services are allrounder like stackblitz, CodeSandbox and replit . So you can edit many programming languages\n\n\u003cp\u003eYou can embed Python code or use it as a Python runner in the following platforms:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eCodePen\u003c/li\u003e\n\u003cli\u003eCodeSandbox\u003c/li\u003e\n\u003cli\u003eGitHub Gist, Issue or Repository\u003c/li\u003e\n\u003cli\u003eGlitch\u003c/li\u003e\n\u003cli\u003eJSFiddle\u003c/li\u003e\n\u003cli\u003eJSitor\u003c/li\u003e\n\u003cli\u003eKotlin (as a language, can be used for Python)\u003c/li\u003e\n\u003cli\u003eMedium (in articles or stories)\u003c/li\u003e\n\u003cli\u003eNext Tech\u003c/li\u003e\n\u003cli\u003eReddit (in code blocks or posts)\u003c/li\u003e\n\u003cli\u003eReplit\u003c/li\u003e\n\u003cli\u003eStackBlitz\u003c/li\u003e\n\u003cli\u003eStackery\u003c/li\u003e\n\u003cli\u003eStack Exchange or Stack Overflow (for sharing code snippets)\u003c/li\u003e\n\u003cli\u003eTwitch (for live coding)\u003c/li\u003e\n\u003cli\u003eTwitter (in code blocks or tweets)\u003c/li\u003e\n\u003cli\u003eWikipedia (in code examples or articles, although not a typical use case)\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eThese platforms either support embedding Python code directly or can be used for running Python code in various contexts.\u003c/p\u003e\n\n\u003cp\u003eFor more you can refer to \u003ca href=\"https://dev.to/p/editor_guide\"\u003eEditor Guide\u003c/a\u003e\u003c/p\u003e\n\n\u003cp\u003eFollow me on GitHub :- \u003ca href=\"https://github.com/SH20RAJ?tab=repositories\"\u003ehttps://github.com/SH20RAJ?tab=repositories\u003c/a\u003e\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003e💡 \u003cstrong\u003eTip:\u003c/strong\u003e You can also use codepen, jsitor or jsfiddle with inside iframe code to add non - supporting website as iframe. i.e. embedding trinket.io code block \u003ccode\u003e\u0026lt;iframe src=\"https://trinket.io/embed/python/edd948bf08\" width=\"100%\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen\u0026gt;\u0026lt;/iframe\u0026gt;\u003c/code\u003e\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"-codepen-httpscodepeniosh20rajpenqbwvjly-\" href=\"#-codepen-httpscodepeniosh20rajpenqbwvjly-\"\u003e\n  \u003c/a\u003e\n  \u003ciframe height=\"600\" src=\"https://codepen.io/SH20RAJ/embed/qBwVJLy?height=600\u0026amp;default-tab=result\u0026amp;embed-version=2\" scrolling=\"no\" frameborder=\"no\" allowtransparency=\"true\" loading=\"lazy\" style=\"width: 100%;\"\u003e\n\u003c/iframe\u003e\n\n\u003c/h2\u003e\n\n","body_markdown":"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.\n\n{% youtube https://www.youtube.com/watch?v=yEWLR9kcFPY %}\n\n```python\nprintf('Some Python Here! 🔥')\n```\n\nSee Markdown behind this Post :-https://dev.to/api/articles/sh20raj/embed-codes-on-devto-using-liquid-syntax-with-runner-3hl4 | See on [Codes20](https://codes20.github.io/95944e83e105c5c8f926ea6892705377)\n\n`{% embed https://... %}`\n\n## Embed JavaScript \n\n### runkit\n\n{% runkit\n// hidden setup JavaScript code goes in this preamble area\nconst hiddenVar = 42\n%}\n// visible, reader-editable JavaScript code goes here\nlet i = 23;\nconsole.log(hiddenVar,i)\n{% endrunkit %}\n\n\n\n---\n\n## Embed Python\n\n### Stackblitz\n{% embed https://stackblitz.com/edit/secret-python-svndnu?ctl=1\u0026embed=1\u0026file=main.py\u0026hideExplorer=1\u0026hideNavigation=1\u0026theme=dark\u0026view=editor %}\n\n## Embed HTML\n\n### Glitch\n\n{% embed https://glitch.com/edit/#!/sopdrive %}\n\n### Codepen\n\n{% codepen https://codepen.io/SH20RAJ/pen/dyLZgJj %}\n\nAlternatives - JSFiddle, JSitor...\n\n## Php/Typescript\n\n### Replit\n\n{% embed https://replit.com/@SH20RAJ/svg-pack %}\n\n### Gist\n{% gist https://gist.github.com/SH20RAJ/70640802273639038942447c650fcc64 %}\nMany of the services are allrounder like stackblitz, CodeSandbox and replit . So you can edit many programming languages\n\n\nYou can embed Python code or use it as a Python runner in the following platforms:\n\n- CodePen\n- CodeSandbox\n- GitHub Gist, Issue or Repository\n- Glitch\n- JSFiddle\n- JSitor\n- Kotlin (as a language, can be used for Python)\n- Medium (in articles or stories)\n- Next Tech\n- Reddit (in code blocks or posts)\n- Replit\n- StackBlitz\n- Stackery\n- Stack Exchange or Stack Overflow (for sharing code snippets)\n- Twitch (for live coding)\n- Twitter (in code blocks or tweets)\n- Wikipedia (in code examples or articles, although not a typical use case)\n\nThese platforms either support embedding Python code directly or can be used for running Python code in various contexts.\n\n\nFor more you can refer to [Editor Guide](https://dev.to/p/editor_guide)\n\nFollow me on GitHub :- https://github.com/SH20RAJ?tab=repositories\n\n\u003e :bulb: **Tip:** You can also use codepen, jsitor or jsfiddle with inside iframe code to add non - supporting website as iframe. i.e. embedding trinket.io code block `\u003ciframe src=\"https://trinket.io/embed/python/edd948bf08\" width=\"100%\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen\u003e\u003c/iframe\u003e`\n\n{% codepen https://codepen.io/SH20RAJ/pen/qBwVJLy %}\n---","user":{"name":"Sh Raj","username":"sh20raj","twitter_username":"SH20RAJ","github_username":"SH20RAJ","user_id":788719,"website_url":"https://codexdindia.blogspot.com","profile_image":"https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F788719%2F0012e877-5660-4495-97b5-60a3d7f9121e.jpg","profile_image_90":"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F788719%2F0012e877-5660-4495-97b5-60a3d7f9121e.jpg"}}