How to Embed Solidity Code Snippets in Your Website / Blog (Using EthFiddle)
Last week, we added oEmbed functionality to EthFiddle. That means you can now easily add syntax-highlighted Solidity snippets in your blog posts that are nicely styled, while also providing a fast way to compile and test the Smart Contract in your browser.
The straightforward way
Wordpress / Medium / Blogger
If you are using a platform that supports oEmbed such as Medium or Wordpress, you do not have to do any complex work. Just paste your EthFiddle link and the platform will do the heavy lifting for you!
The below fiddle renders by just pasting its link and pressing enter.
<blockquote class=”embedly-card”><h4><a href=”https://ethfiddle.com/2Rx8cQdEx3">2Rx8cQdEx3</a></h4><p>1 Solidity code sharing site. Share Solidity code snippets with friends, or check out cool code snippets from around the web.</p></blockquote>
<script async src=”//cdn.embedly.com/widgets/platform.js” charset=”UTF-8"></script>
Note: Embed.ly is a paid service and costs $9 / mo.
The hard way
What do you do when you are building your own custom website and you don’t want to use embed.ly?
You can get an embed code from EthFiddle by crafting a special URL that looks like this and doing a GET request:
The server responds with (formatted with http://jsonprettyprint.com/):
"html": "<iframe id="ef_2Rx8cQdEx3" src="https://ethfiddle.com/services/iframesnippet/2Rx8cQdEx3" scrolling="no" frameborder="0" height="300" width="300" allowtransparency="true" class="ef_embed_iframe" style="width: 100%; overflow: hidden;"></iframe>",
html key. You can copy the iframe code and add it to your website. Of course you can modify the CSS in order to fit your style.
In this example you would add the following to your site:
<iframe src="https://ethfiddle.com/services/iframesnippet/2Rx8cQdEx3" scrolling="no" frameborder="0" height="300" width="300" allowtransparency="true" class="ef_embed_iframe" style="width: 100%; overflow: hidden;"></iframe>
And that’s it! Now you can easily embed Solidity code snippets on all your sites and blog posts.
Join our mailing list below to get regular updates:
Loom Network is the blockchain platform of choice for serious dapp developers — the Universal Layer 2 that provides developers the tools they need to build functional user-facing dapps today.
New to Loom? Start here.
Want to stake your LOOM tokens and help secure Loom Network? Find out how.
And if you enjoyed this article and want to stay in the loop, go ahead and sign up for our private mailing list.