|
|
|
Inscriptions made in monospace fonts are created using the , and tags. The results of using these tags are usually identical: a monospaced font with a fixed character size and spacing.
Tag A tag is an inline container element that is used to insert small fragments of program code into it, for example, in a web document representing tutorial on programming. Browsers display such code in a monospaced font (for example, Courier New). If you use ero together with the element
The tag is used to enter text without formatting, that is, preserving all spaces, tabs and line breaks. You can apply most text formatting elements within this element.
Attention: In language HTML hyphens lines, consecutive spaces and tabs are ignored. Several spaces in a row are treated as one space.
Example: using elements and Within an element, the Browser duplicates every space or line break it encounters, preserving your original formatting.
If (document.getElementsByClassName) ( x = document.getElementsByClassName("pagination") if (x.length>y) ( x.style.visibility = "hidden"; )
Within the "pre" element, the browser duplicates every space or line break it encounters, preserving your original formatting.
if (document.getElementsByClassName) ( x = document.getElementsByClassName("pagination") if (x.length>y) ( x.style.visibility = "hidden"; )
Tags and The tag marks a piece of code as being entered by the user using the keyboard. Some browsers mark such text with an additional background.
The tag is used to generate computer output, such as the text that appears in a console window after you enter a control script. This rarely used element simply displays its contents in a monospaced font like , , .
Example: elements and
Place the text that the user must enter from the keyboard in
container element "kbd".
Enter text: This is the text entered from the keyboard
This is the text that is placed in the "samp" container
Tag The tag is used to further highlight variables in the program code. It identifies a variable in a mathematical expression or a program parameter and is usually shown in italics.
Example: elements Kinetic energy of the body:
Kinetic energy of the body:
Wк = mv2/2
Tasks Final task In this lesson, you learned about tags that display their content in a monospaced font, highlight variables in the code, and use a preformatting tag. All of them are important when working with mathematical expressions and program code.
It's time to review what you've learned and complete three simple tasks:
Variable Using HTML elements, designate the letter y as a variable in the above equation.
Variable
Parabola equation y = Nx2
Variable
Parabola equation y = Nx2
Pre-formatted text Using the HTML element, make the text placed in the code element appear in the browser with all whitespace and line breaks preserved as is.
In connection with maintaining this blog, I periodically have to insert fragments of html and css code into the site. In the process of implementing the normal solution, it turned out that an adequate description ready-made solutions For some reason it can’t be found in Russian, so you’ll 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, the tag In the html code is written as Inserting large fragments of code onto the site.
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 next tag is specifically designed for escaped display of 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 it is necessary to use tags for line breaks
And
The tag is not valid from the point of view of the 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 the 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 code 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. Tag 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). 
How to display html code on a post page as text. Tag 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. 
Display html code on the page as text. 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. The HTML tutorial suggests inserting this tag only in this form.
Plugins for displaying code on the post page 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.
Sweet couple WP-Syntax – 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.
Conclusion 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 deposit html tags to plain text without conversion?
