Weebly’s drag and drop editor is one of the easiest and lively editor we have seen in site building arena. For a normal user, the real advantage is to view the changes within the editor without the need of seeing the preview. Embed code element is one of the exception that the preview may not work well inside the editor. Besides that there are many situations you may need to insert the raw code on your Weebly site.
There are three ways you can insert raw widget codes on your site.
- Pasting as a Text Element
- Using Color Block App
- Using Weebly Code Block app
- Using Third Party Embedding
Let us Take an Example
Before further discussion, let us take an example code. below is the simple HTML code for creating a table:
<head><title>This is my HTML table.</title></head>
When you paste this code inside an embed code element, it will be converted into a table like below:
|Cell 1||Cell 2|
|Cell 3||Cell 4|
So how should you show the code as it is?
Pasting as a Text Element
The easiest way is to copy and paste your code inside a text element. Weebly text element will treat the code also as a text and display as it is.
But the problem is evident that it does not look like a code and you should differentiate the code from regular text using font coloring or background.
Using Color Block App
The color block app helps you to add background color to any of the Weebly element. Go to the “Apps” tab, search and connect your site to the color block app.
You can insert a text element with your code inside a color block element. The background color, margins and paddings can be adjusted to provide much better look to your code.
Using Weebly Code Block App
Weebly offers a code block element through their app center. Go to “Apps” tab and click on the “Made by Weebly” block. Connect the code block app to your site.
This app will allow you to add code in a formal way and support 120+ languages. You can add the code with or without header and in dark or light style. It will also highlight the code with different colors to make it beautiful.
This is a default Weebly app and developed by Weebly guys. That’s being said – it has its own bugs yet to be resolved. Though you may not see any issue on the published page, you can see the errors in developer console like below.
Looks Weebly guys don’t have time to look into such problems as you can see in the app review.
Using Third Party Embedding
There are lots of third party websites allow you to embed the complete project code along with the results on your page. We love codepen.io due to its easiness. The advantage here is you can embed any widgets you like with code and result. The code section helps to showcase HTML, CSS and JS independently which will help users to understand the code easily.
Below is an example of CSS shadow box widget created on codepen.io.