Inserting html code into a page. How to add your HTML code? Inserting an html snippet on a separate page
The method for inserting html code is slightly different depending on where exactly you need to paste it. Accordingly, we will consider different options.
To insert html-code on the site, and in particular in the text of an article on one of the pages of the site, go to the administrative panel, select and open the desired article for editing. Next, the visual editor mode must be changed to the editing mode. When working with a CMS system, to change the mode, simply press . Then copy and paste the html code into the planned place.
Often, after pasting, you want to format the code a little, for example, set the text to wrap around the code on the other side. There is an easy way to do this using CSS properties.
Using the tag
So that when saving an article, the visual editor does not cut out changes that, in his opinion, are not html code, it is better to disable it when inserting the code. The editor's cutting of changes is designed to prevent the threat of possible malicious codes.
How to disable the visual editor?
In the administrative panel, click "Site" - "General Settings" - "Site" and in the line "Visual Editor" select "No Editor". Now it will be possible to edit and insert html code in html code mode. Once you've pasted the code and saved your changes, the visual editor can be re-enabled.
If you want to re-edit the article, the html code will also need to be re-inserted. Sometimes it is required that the html-code is displayed on each of the pages of the site. Inserting html code so that it is displayed on each of the pages of the site.
To solve this problem, use notepad or another editor to enter the main site file (the default is index.php or index.html). In an open file, choose your preferred location to paste the code. For convenience, you can specify a phrase in the search, located in the place where you need to paste the code, so you can find it faster. Then copy the code and paste it where you want. If necessary, the code can be formatted in the same way that was described for formatting the code in the article.
Do you want to post a code on the site with some kind of solution or instruction, but you have problems with this? Learn how to get it right and display the code as it appears in the code editor.
It would seem that it is not a difficult task to insert the code, but difficulties may arise if you do not know about some of the rules that will be discussed.
Paste code as code
To insert the code on the site, it is wrapped in tags
AND . This results in the following construction:
Here is the code
To explain briefly and to the point, in this construction, the code tag tells the browser that there is program code inside it, and the pre tag saves line breaks, tabs (indents) of lines and spaces.
Everything seems to be clear and there is nothing complicated, but the problem is that if you want to insert html code or code containing characters< , >, & , " , ` , then problems may arise - the browser will process your code as html. For example, if you want to show the form code with a button, input fields, etc. in the code, the browser will display the form, not its code.
Code escaping
To prevent this from happening, they do the so-called code escaping - this is when the characters mentioned above are replaced by their UTF codes.
Scheme for replacing characters with utf codes
The symbols and codes that replace them are shown below:
Of course, no one does the manual replacement of characters - this is done programmatically. The most accessible tool for this is online code escaping, where in an instant all characters will be replaced, and the code will save all spaces and hyphens and will be completely ready to be inserted into the tag construction
As a result, after escaping, you can insert any piece of code. You can see an example of such an insert after escaping the code below:
header
Related Posts
Moreover, I would like to immediately clarify that we will insert the code into the article itself, so that our readers can copy it without wasting time typing the text itself. Thus, we will increase the convenience () of our resource - this time. Yes, and the articles will look more professional and finished - these are two.
I would also like to note that the information in this article will be useful to people who either, as we tell you, how to make various kinds of add-ons on the site, or to users who simply like to share useful information. And it doesn’t matter that this information is a code 🙂 By the way, I’ll reveal a little secret, on this project we display it using the Wp-Syntex plugin.
You ask: "Why do we use it?" The answer is simple - there are no comrades for the taste and color. Joke. In fact, we chose this plugin because it is easy to use, it perfectly adds visual style to various programming languages (css, html, java, javascript, perl, sql, etc.), and it does not load our server.
Well, since I let it slip about Wp-Syntex, let's use it as an example to show how to insert code into WordPress articles.
First you need to install this plugin. We talked about how to do this in an article about .
Therefore, I will not describe this action here.
As a result, you will have the following output:
The code you want to be displayed
Also, instead of php in this code, you can insert another programming language, such as css or java. At the same time, the style of appearance will change.
Additional Features of Wp-Syntex
If you add the attribute to the opening "pre" tag line, that is, the code that you will have to paste will begin like this:
The code you want to be displayed
I hope you notice the difference.
There is one more small attribute that you may need - this is escaped. It allows you to convert html character codes directly into the characters themselves. For example, ">" it will convert to ">". In order for this function to work, insert the following attribute into the opening "pre" tag:
escaped="true"
Accordingly, the tag will begin like this:
<
pre lang=
"php"
line=
"1"
escaped=
"true"
>
Also on the Internet, I found information that you can install another plugin (WP-Syntax Button), which works in conjunction with our plugin and adds a code insert button to the WP editor. I was not too lazy and decided to test it.
Immediately upon installing it, I was alerted by the fact that it had not been updated for a long time and was not tested with our version of WordPress. Well, what can I say, my fears were justified.
After activating the WP-Syntax Button, I decided in one of our articles I tried to insert a java script. I did everything as it was indicated in the mountain of instructions and recommendations. Pasted the script into the article, highlighted it and pressed the "code" button.
After that, he indicated the programming language and the line number from which the script output should begin.
You may ask why I wrote about this experiment in this article? By this I wanted to say that when you are looking for some information on the Internet, pay attention to the date of publication. After all, there is a very high probability that the information in the old article was relevant several years ago, but at the moment it simply does not work, and its use or implementation can lead to vulnerability of your project.
On our blog, I try to keep all the material up to date, constantly monitor updates and, if necessary, make adjustments to already written articles.
If you want to receive up-to-date information to your e-mail, then I recommend.
Video "How to insert HTML code into an article"
Friends, if someone prefers to see how this is done, then I recorded a video for you. And I remind you that we also have a youtube channel that you can also subscribe to.
Related articles:
Well, I hope the article turned out to be not difficult, and I was able to tell you in detail about how you can insert html code into the site without unnecessary troubles.
Don't neglect the aesthetics of your blog. After all, our reader, as in life, meets by clothes, but sees off by mind.
That's all for me!
Bye Bye!
Best regards, Anton Kalmykov
Do you know what is one of the main advantages of the Wix editor? The fact that it gives everyone the opportunity without requiring any special knowledge in the field of programming. This is a very simple and intuitive platform where you can easily add, remove, move and edit any elements in every possible way without touching a single line of code.
But what if you need to add a feature to your site that is not available in the Wix editor? Just for this, we have developed a seemingly simple, but in fact - a mega-functional HTML widget, which we will tell you about today. With the help of an HTML application, you can add literally everything to the site (except perhaps - approx. ed.), including any kind of third-party content, widgets and applications.
What else is an HTML application?
Let's draw a parallel with creativity for clarity. Imagine that you are making a collage. So, the HTML application is such a thing with which you can easily and quickly insert any picture you like into your collage.
A "picture", that is, an inline element, can occupy the entire page of your site or part of it and be located next to other sections, images or text. You can easily change the position of elements, increase or decrease them - in general, do everything that you normally do in the Wix editor.
The HTML application can be used in two ways:
For embedding sites via iframe. Suitable for adding pages from other resources. This could be a Wikipedia article or an IMDB profile published in its entirety on your site.
For embedding HTML code. It is used in cases where you want to install a widget on the site that is not among the applications in .
For a better understanding of how this works, we suggest watching a short video tutorial on adding HTML code in the Wix editor:
Cool uses of HTML code on a website
An HTML application is a very useful thing. Here is a sample list of what can be added to the site with it:
Audio and video players and playlists. Almost all resources with media content allow you to embed it on other sites.
The ability to place your own HTML code is only available on . This functionality is intended for those who are professionally versed in the web, need advanced features and know exactly what they will do with them.
Attention!
Working with this widget requires knowledge of HTML, CSS and JavaScript. Writing code with errors can lead to incorrect work and display of the site.
You can post your HTML code:
Important:
The site must be published for the changes to take effect.
Working with jQuery scripts
If you want to use jQuery scripts on your site, then you need to do it in a special way, since the jQuery library is included in uKit in a non-standard way. All jQuery scripts should be placed in the control panel of your site in the "Custom code" section. In this case, the code must be placed " In the end
". All your scripts must be wrapped in a library require.js in the following way: