How to Embed Solidity Code Snippets in Your Website / Blog (Using EthFiddle)

Up until now, there hasn’t been an easy way to embed your Ethereum Solidity code snippets into posts on your blog or website. Most blog posts I have seen have been using github gists with Javascript code highlighting.

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.

How?

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.

https://ethfiddle.com/2Rx8cQdEx3

Other Platforms

Ethfiddle also works with embed.ly! Navigate to this link and input your ethfiddle URL. At the bottom of the page it returns a code snippet that you can use to embed your fiddle!

<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:

$ curl https://ethfiddle.com/services/oembed?url=ethfiddle.com/2Rx8cQdEx3&format=json

The server responds with (formatted with http://jsonprettyprint.com/):

{
"type": "rich",
"version": 1,
"title": "2Rx8cQdEx3",
"provider_name": "Ethfiddle",
"provider_url": "https://ethfiddle.com",
"cache_age": 86400,
"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>",
"width": "300",
"height": "300"
}

Note the 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>

Conclusion

And that’s it! Now you can easily embed Solidity code snippets on all your sites and blog posts.

If you’re learning Solidity or building Ethereum DApps, you may be interested in our interactive Solidity code academy or our scalable sidechains for Ethereum DApps.

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.

Loom Network

🛸 The blockchain platform of choice for serious dapp developers — http://loomx.io

Georgios Konstantopoulos

Written by

Independent consultant & engineer focused on blockchain scalability, infosec and mechanism design. That Layer 2 guy. Aspiring Rustacean. me@gakonst.com

Loom Network

🛸 The blockchain platform of choice for serious dapp developers — http://loomx.io

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade