February 10, 2009

Styling the Snipt Embed

The Snipt embed is a powerful tool- it lets you share the code you store here on Snipt.org in other places- like on your blog or on another website. The embed is much more than a simple script though- it is a highly stylable and customizable embedded item.

There are two major styling aspects to the Snipt embed, the container, and the code. Both are fully customizable. In this post I’ll explain how to make the most out of the Snipt embed.

The Embed

For this tutorial I’ll beĀ  working with this snipt. When embedded, the snipt appears like this by default.

If you applied a theme to this snipt, it would show up embedded with that theme, but even themes can be overriden for maximum flexibility.

The Container

The embed container is styled using CSS. This can be modified by overriding the default CSS styles. You can use the Snipt embed CSS Template to get started. Just paste it after the embed script and your ready to get styling.

By simply playing with some of the css you can completely change the appearance of the embed. Here are just a few examples, click view source to see the styles that create this effect:

An embed with a fixed width…

An embed with a different background…

An embed with no container and fixed width…

As you can see you can use CSS to change everything about the embed. This is just a small example of what you can do with CSS and the Snipt embed.

But what about the code highlighting itself? Yep, you can change that too.

The Code

In addition to CSS you can pass the embed parameters to change its appearance on the fly. The embed takes 3 (optional) parameters-

Font Size (fontsize)

Font (font)

Color (colors)

Here is an example: <script src=”http://embed.snipt.org/sok/font=arial&fontsize=12&colors=000000,000000,000000,000000,000000,000000,000000,000000,000000”></script>

Creates an embed like this. As you can see the font is now Arial size 12, and all the code is black because we have set all the highlight fields to black (000000). The widget takes 9 hex based colors, numbers only, comma seperated. Any colors you do not pass will be replaced by the default or the theme color if your snipt uses themes.

The color values are, in order:

OVERALL COLOR
VARIABLE COLOR
KEYWORD COLOR
METHOD COLOR
COMMENT COLOR
STRING COLOR
NUMBER COLOR
SYMBOL COLOR
ESCAPE CHAR COLOR

Conclusion

The goal of the Snipt embed is to make sharing code easier- not only that but to be able to share it in whatever motif you want. If people desire even MORE flexibility I will gladly extend the embed, just tweet at me or post in the forums.

Here is a simple example of the same embed 9 times, each with different styles. If you think up some cool highlighting themes drop me a tweet and I’ll them to the theme gallery!

| Comments (View)
blog comments powered by Disqus