HTML character codes. HTML Program code Tags designed to display parts of program code

For ease of use, I grouped the tags into thematic sections, adding display property values ​​for each tag. To go to the table, click on the picture.

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.

So 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, 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.

Most 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.

So, 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 add html tags to 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, with using HTML code tag, 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 show content HTML tag code in monospace font. This is a smaller font with a fixed size.

code (
font-family: monospace;
}

This is the normal text:

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:

The specified style in the browser.