In connection with maintaining this blog, we periodically have to insert fragments of html and css code. In the process of implementing a normal solution, it turned out that for some reason there was no adequate description of ready-made solutions in Russian, so you would have to fill the gap yourself.
Let's start with something simple:
How to insert html code into text?To insert one or two tags into the text on a website, you can use html symbols< для вставки < и символ >to insert > thus tag B html code e is written as Inserting large fragments of code into a website.
To insert the html code itself into the site, there are three tags:
And and
Tag Identifies a block of preformatted text. That is, text in which all the spaces and hyphens have already been placed. By default in the browser, the contents of the tag are displayed in monospace font and with all spaces between words. In the tag, all spaces are displayed, and all line breaks are taken into account (html by default does not take into account multiple spaces, converting them into one). Inside the container you can use any tags except the following: , , , , And .
The following tag is specifically intended for escaped display program code. By default, the browser displays the contents of the tag in small, monospaced text. The tag does not take into account additional spaces and text breaks, as a result of which tags must be used to break a line
And
The tag is not valid from the point of view html standard, however, on this moment supported by all browsers. The tag displays the contents of the container as plain text with all spaces and hyphens. Until the tag is “canonized,” its use is considered unkosher and heretical.
The correct solution at the moment is to use a tag WITH nested tags in places where it is necessary. Technically, we need the tag to escape code fragments that, for one reason or another, fall out of the tag. How to beautifully format html code using Jquery?
On our website we use the Snippet script. The snippet is intended to simplify the visual design of program code examples. The script works like this:
Div.blog_right h2 ( font-size: 24px; color: #ff9933; margin-bottom: 9px; line-height: 44px; font-family: "arial", "verdana", sans-serif, "Lucida Sans"; font -weight: 100; margin-top: 0.83em; )
Connecting the code execution script:2) Connect js and css files. You will also need the connected Jquery library.
3) Set up the script:
$(document).ready(function())( $("pre.htmlCode").snippet("html",(style:"acid")); // We look for tags with the class "htmlCode" // and connect to these elements with acid style and html processing $("pre.styles").snippet("css",(style:"acid")); // We look for tags with the "styles" class // and connect acid style and processing to these elements for CSS code $("pre.js").snippet("javascript",(style:"acid")); // We look for tags with the "js" class // and connect acid style and processing for )) ;
4) More sophisticated documentation for the script is available on the developers’ website. The script can change the design on the fly, highlight the necessary pieces of code in frames, take out the trash and cook food.
By the way, sharing your positive or even negative experiences with readers is the basis of successful blogging (and).
Many people have problems, so such information is in demand.
How to display program codeSo, you want to let readers copy the script or html code, place it in the body of the post. Not so. How to output it without conversion?
More recently, in order to display tags correctly on a page, it was proposed to manually replace characters< и >for special characters< и >.
Today, the WordPress engine most often knows how to do such transformations itself, but also adds a lot of garbage, distorts, truncates the code, makes it unreadable or uncopyable (it happened in my topic).
In fact, there are several ways to beautifully format html code and insert it into a post with syntax highlighting: without a plugin and using wordpress plugins for the code.
I will list the methods, and you try what suits you. I have learned from my own experience that not every template has tags and plugins that work the same way. For more information on how to display code correctly, see the HTML tutorial.
Show html code on the page as text. TagShow html code on the page as text, tags help highlight it
Write the code in the VISUAL EDITOR.
Go to HTML MODE, add opening and closing tag My theme already has automatic signs< >converted to special characters< и >.
SAVE. DO NOT switch to visual mode again, otherwise the changes will be lost.
All spaces are PRESERVED when displayed. In my template I got the following result (your display may be different). 
The tag also allows you to display one or more lines of program code. Spaces and breaks are NOT taken into account, wrap lines with tags
Or
.
Do everything the same way as inserting a tag. 
If you offer codes to readers infrequently, you can use this design.
INSERT YOUR CODE HERE
It helps to display codes or scripts in the form of text enclosed in a frame, CONSIDERING formatting and all hyphens. 
The code will be displayed in a nice frame. Edit its width by changing the width parameter, height - height.
But the fact is that CODES using the tag are considered INVALID. HTML Tutorial suggests inserting this tag only in this form.
Plugins for displaying code on the post pageMost bloggers use WordPress plugins to display HTML codes beautifully and consistently on the post page. Again, there are many plugins, but only one worked correctly for me.
I will provide a list, and you will select a plugin that works with your template.
A sweet couple WP-Syntax – it highlights the code with a frame and makes it possible to highlight the syntax. Plus wp-syntax button – displays a button in the blog admin panel, provides the ability to insert HTML code or script without converting it to a special window. Disadvantage: all actions are performed in html mode; you cannot switch to visual mode, otherwise all changes will disappear.
Syntax Highlighter Compress – in text editor displays an additional button. Click it, a window opens where you can enter the code and select the programming language.
Other plugins work the same way.
- Better WordPress Syntax
- Wp-highlight.js
- SyntaxHighlighter
- Auto SyntaxHighlighter (mine). And many other plugins.
I had to install and activate everything one by one until I found the one that works in my template.
ConclusionSo, from the article you learned how you can display HTML code on a post page using tags or plugins. What method do you use to insert html tags into plain text without conversion?
Dear friends! Today we will talk about the HTML code tag. When writing this particular article or any other training materials, it is periodically necessary to insert pieces of HTML, CSS code and generally any program code.
I think you have already guessed what the HTML code tag is for. Through it, we tell the browser: “Please display everything that will be placed inside the “code” container as text.”
…
Otherwise, the browser will not understand where the real code is and where the demo code is and will not show anything. Because the browser perceives all tags on the page as commands to display content. In other words, using HTML tag code, the tags themselves are displayed in the browser window to demonstrate the HTML code.
Let's look at an example of displaying tags on a page below:
Displaying tags on a page
HTML code snippet
This is the title.
This is a paragraph.
Let's look at the result of this example:
Angle brackets< >should be replaced by Special symbols&.. and break each line with br or p tags.
By default, browsers display the contents of the HTML code tag in a monospaced font. This is a smaller font with a fixed size.
code (
font-family: monospace;
}
This is the normal text:
This is part of the program code
This is what it looks like in the default browser:
Now let's redefine appearance code inside the code tag. Let's set the element's font-family: verdana; or any other font.
code (
font-family: verdana;
}
This is the normal text:
This is part of the program code
The specified style in the browser.
HTML special characters are short pieces of code called character entities. They are used to display characters that have special meaning in HTML, as well as characters that are not available on the keyboard.
Special characters in HTML are called reserved characters. For example, left () angle brackets are reserved in HTML to define opening and closing tags.
Symbols that are not available on the keyboard include characters such as the copyright symbol (©) and the mathematical value pi.
If we want to use them in a document and display them in the browser, we need to use HTML character references.
Case StudyLet's say you want to display a block of HTML code on a web page and display element tags. You can do this by simply placing an HTML block within . But you will find that even in , the block will still be treated as HTML code and rendered accordingly by the browser. In this case, you can replace all HTML special characters with corresponding symbolic links to prevent the browser from parsing the code:
This is a list of items.
- List Item A
- List Item B
- List Item C