Weebly’s drag and drop editor is one of the easiest and lively editors 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. There are many situations you may need to insert the raw code on your Weebly site. Especially when you are running a tutorial site or if you are a developer, you need to showcase the HTML, CSS and JavaScript codes on the site. If you are in such situation, check out this article on how to insert raw code in Weebly editor using multiple options.
Let us Take an Example
There are four ways you can insert raw widget codes on your site. Before further discussion, let us take an example code. Below is the simple HTML code for creating a table:
<html>
<head><title>This is my HTML table.</title></head>
<body>
<table border=1>
<tr><td>Cell 1</td>
<td>Cell 2</td></tr>
<tr><td>Cell 3</td>
<td>Cell 4</td></tr>
</table>
</body>
</html>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?
1. 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.
Note: Embed code element in Weebly is useful for inserting custom HTML widgets. It converts the code and show the result of the code instead of the raw code. It is one of the exceptions that the preview may not work well inside the editor.
2. 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, margin and padding can be adjusted to provide much better look to your code.
3. 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 supports 120+ languages. You can add the code with or without header and in dark or light style. It will highlight the code syntax with different colors to make it beautiful and professional.
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 the customers feedback in the app review section.
4. 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.
Summary
As you see, inserting raw code in Weebly is as easy as adding text content and you have multiple options. However, the choice depends on the scale you want to use the raw code on your site. For few instances, we recommend using Weebly Code Block app though it has console errors. If you want to show codes on multiple pages then you can go for third-party solutions like Codepen or JSFiddle. Otherwise, you should use WordPress which offers plenty of syntax highlighter plugins to showcase your work.
1 Comment
Leave your reply.