A few months back we added Embed and oEmbed abilities to snippets saved using our generators and in the past weeks we are seeing a giant increase in the number of sites / users using this service.
This is great, but we’d like the internet to be diverse and not all look the same so we have added a some features to let you customize the embedded snippet look and feel.
In this post we will go over these extra features and how to use them.
Usage
If you don’t know how to embed snippets from this site you should take a minute to read Embed snippets to your site and either use the JavaScript embed code or the snippet URL (if you installed our GenerateWP oEmbed plugin) to embed the snippet on your site.
If you want to enable all other features describe bellow just add parameters to the embed src URL, We’ll go over that later.
Themes
you can change the embedded snippet theme using the theme parameter using any of these values:
- github (default)
- geonyx
- kimono
- paradise
- soft
- zenophilia
- md (material design)
- luminous_dark (dark theme)
- luminous_light (light theme)
Theme examples
So this is the default theme, GitHub theme:
And if we what to use another theme like the material design (which is the one we use on this blog) we just set the theme parameter to md on the embed src url:
<script src="https://generatewp.com/embed/z3k0yr8.js?theme=md"></script>
Line numbers, Auto links and more…
Line Numbers
Line numbers are turned on by default but you can turn it off using the ln parameter and set it to zero (0).
For example:
<script src="https://generatewp.com/embed/z3k0yr8.js?theme=md&ln=0"></script>
Other then just turning line numbers on or off you can also control he starting line number which obviously defaults to one, to set the starting line number just use the sl parameter to the number you want, lets say 15 for example:
<script src="https://generatewp.com/embed/z3k0yr8.js?theme=md&sl=15"></script>
Auto links
You can tell the embedded snippet to auto-link links listed in the code and because this feature is set off by default you can simple turn it on by using the al parameter and setting it to one (1).
<script src="https://generatewp.com/embed/2VDEJ56.js?theme=md&al=1"></script>
Max Height
By default the max height for an embedded snippet is set to 500px but you can overwrite that if you have a long snippet and don’t want a vertical scroll bar or a very short snippet, by using the mh parameter which accepts the max height in pixels (no need for the px at the end).
<script src="https://generatewp.com/embed/z3k0yr8.js?theme=md&mh=850"></script>
Syntax language
Our default syntax language is derived from our generators which is PHP, but we do have a custom snippet generator that accepts other programming languages typed snippets and that’s why we added the lang parameter.
currently accepted languages are:
- php (default)
- html
- css
- javascript
lets embed a JavaScript snippet without any parameters other then theme:
That’s not good!!! see the automatically added <?php on the first line?
Now lets set the lang parameter to javascript
<script src="https://generatewp.com/embed/VpxDXgp.js?theme=md&lang=javascript"></script>
Much better.
Format
The snippet embed code creates a html that shows the snipped on your page by default but if you’d like you can set the format parameter to iframe and your snippet will be wrapped inside an iframe on your page, super useful when embedding different themes on a single page.
<script src="https://generatewp.com/embed/z3k0yr8.js?theme=md&format=iframe"></script>
Using GenerateWP oEmbed plugin
If you decide to use the our plugin the you don’t need to use the embed code, you just need the snippet page URL ex:
https://generatewp.com/snippet/z3k0yr8/
And if you want to customize it just use any of the parameters described above, for example material design theme with max height of 900px and no line numbers:
https://generatewp.com/snippet/z3k0yr8/?theme=md&mh=900&ln=0
That’s is it for now,
we hope you’ll enjoy using these features and feel free to let us know what you think.
