Weebly’s site builder has a healthy number of content elements for adding from simple paragraphs, pictures and galleries to even slideshows, contact forms, polls and surveys. But if you are a developer and you want to display code blocks, then you are almost on your own. Almost, because you are at least provided with the single most important element for doing so, the “Embed Code” element. That alone though, will get you nowhere and you will still need to follow a number of steps for going from an ugly mess to a decent code display, one that someone can easily read and copy-paste (see figure to the right).
One solution to the problem, it certainly is to use screenshots of the code, embedded using the “Image” element. It is a decent solution and it even makes it not possible for someone to easily copy your code. But why display and share your code, if not for someone else to use? Certainly, in our fast paced age, a fellow coder would expect nothing less than to be able to quickly copy and test any chunk of code he/she finds in the net. An image of a code block, most probably won’t bring any smile to a developer's face and it might even frustrate them. Especially, if the code isn’t included in a downloadable file.
The other solution, is the one described here, using the “Embed Code”. For that you will need to follow the steps:
The other solution, is the one described here, using the “Embed Code”. For that you will need to follow the steps:
$(function() { |
The steps 1, 2 & 3 are necessary for producing a decent code block display. The steps 4 & 5 are optional and will just make your code blocks look prettier. Leave a comment or check the article on CodeProject.