How to: Paste snippets or code into a blog or page

by | Tips & Tricks

Below is an extract from our ‘Tips & Tricks‘ page.

There are many plugins and different online apps that will assist with this, but the method we use, on the basis of simplicity and reliability, is to use Pastebin to generate the highlighted syntax and then to embed the iFrame linked to Pastebin to show it on the page.

  1. Go to Pastebin and register a FREE account
  2. Hit the ‘New Paste’ button at the top of the page
  3. Paste into the box the code you want to display on your page
  4. Select the type of Syntax Highlighting required e.g. CSS, HTML, PHP
  5. Select the expiry (default is never) and leave exposure as ‘Public’
  6. Hit the ‘Create New Paste’ button
  7. On the next screen, select ‘Embed’. This will give you two embed codes – Javascript & iFrame
  8. Copy the code from the iframe embedding section
  9. Go to your page/blog and in the module in which you want to show the code, select ‘text’ as opposed to ‘visual’ editor
  10. Paste the iframe code from Pastebin wherever you desire the iframe to be displayed
  11. If you hit the preview button, you may get a warning (chrome especially). Dont worry, save the module, update and then view the page
  12. Voila, the iframe is showing in its default settings as below:

You can tweak the appearance somewhat if you wish. We center the iframe, add a box shadow, limit the width and set the height.

In practice, we use the same line of iframe code and then simply change the URL to Pastebin. See our standard line above and this produces the iframe shown above. This results in a standardized appearance, albeit the height may need to be adjusted depending on the length of the code to be displayed.

If we adjust the height to 100px, the iframe changes to that shown below:

You can play around with the inline CSS to suit your own requirements. For example you could change the width to 50% and the iframe would wrap the code displayed, as shown below:

To see and obtain the box shadow CSS (change offset, blur, transparency, color etc), you can use a box-shadow generator such as www.cssmatic.com. To remove the center alignment, simply change the <p align=“center”> to <p> and the iframe will be left aligned.

Signup for the iConnik quarterly newsletter

Thanks. You have successfully signed up

Share This