Memo on using BB codes (bbCode). Memo on using BB codes (bbCode) Program code html

www.spaceports.com - free hosting. The allocated volume is 10 MB. There is access via FTP. Advertising - Banner. Your website address is /~you. Additional services - CGI-BIN, MailForm, PHP scripting, MySQL database support.

www.stormloader.com - free hosting. The allocated volume is 50 MB. Uploading files - Browser. Advertising - Topbanner. Your website address is /you. Additional services - Page Building Tools, Unmetered Bandwidth.

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, to correctly display tags 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. The 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 insert html tags into plain text without conversion?

Inscriptions made in monospace fonts are created using the , and tags. The results of using these tags are usually identical: a monospaced font with fixed character sizes and spacing.

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 a programming tutorial. 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 HTML, line breaks, consecutive spaces and tabs are ignored. Several spaces in a row are treated as one space.

• Try it yourself »

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"; )

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

• Try it yourself »

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

The tag is used for the purpose additional allocation variables in program code. It identifies a variable in a mathematical expression or a program parameter and is usually shown in italics.

• Try it yourself »

Body kinetic energy:

Body kinetic energy:

Wк = mv2/2

In this lesson, you learned about tags that display their content in a monospaced font, highlight variables in the code, and pre-formatting tags. 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:

• Decide for yourself"

Using HTML elements, designate the letter y as a variable in the above equation.

Variable

Parabola equation y = Nx2

Variable

Parabola equation y = Nx2

• Decide for yourself"

Using HTML element Make sure that the text placed in the code element is displayed by the browser with all whitespace and line breaks preserved as is.

HTML tags are the basis HTML language. Tags are used to delimit the beginning and end of elements in markup.

Each HTML document consists of a tree of HTML elements and text. Each HTML element is identified by a start (opening) and ending (closing) tag. The opening and closing tags contain the name of the tag.

All HTML elements are divided into five types:

• empty elements - , ,
  , , , , , ,
  

	Used for storage additional information about the page. Browsers use this information to process the page, and search engines- for its indexing. There can be several tags in a block, since depending on the attributes used they carry different information.
	Indicator of measurement in a given range.
	A section of a document containing navigation links for the site.
	Defines a section that does not support scripting.
	Container for embedding multimedia (e.g. audio, video, Java applets, ActiveX, PDF and Flash). You can also insert another web page into the current HTML document. The tag is used to pass the parameters of the plugin.
	Ordered numbered list. Numbering can be numeric or alphabetical.
	A container with a title for a group of elements.
	Specifies an option/option to select from the , or , drop-down list.
	Field for displaying the result of a calculation calculated using the script.
	Paragraphs in the text.
	Defines parameters for plugins embedded using the element.
	A container element containing one element and zero or more elements. By itself it does not display anything. Allows the browser to select the most appropriate image.
	Outputs text without formatting, preserving spaces and text breaks. Can be used to display computer code, messages email etc.
	An indicator of the completion of a task of any kind.
	Defines a short quotation.
	Container for East Asian symbols and their decoding.
	Defines its nested text as the base component of the annotation.
	Adds brief description above or below the characters contained in the element, displayed in a smaller font.
	Marks embedded text as additional annotation.
	Displays alternative text if the browser does not support the element.
	Displays text that is not current with a strikethrough.
	Used to display text representing the result of program code or script execution, as well as system messages. Displayed in monospace font.
	Used to define a client-side script (usually JavaScript). Contains either script text or points to external file script using the src attribute.
	Defines a logical area (section) of a page, usually with a header.
	A control element that allows you to select values ​​from a proposed set. Variant values ​​are placed in .
	Displays text in a smaller font size.
	Specifies the location and type of alternative media resources for the , , .
	Container for inline elements. Can be used to format passages of text, such as highlighting individual words.
	Places emphasis in the text, highlighting it in bold.
	Includes embedded style sheets.
	Specifies subscript writing of symbols, for example, element index in chemical formulas.
	Creates a visible title for the tag. Displayed with a filled triangle, clicking on it allows you to view the title details.
	Specifies the superscript spelling of characters.
Cheat sheet with tags 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. Introduction bbCode - Bulletin Board Code, or markup language, used to format messages on many bulletin board systems (BBS) and forums. Tags similar to HTML tags are used to format text. Unlike HTML tags, bbCode tags enclose square brackets. Before displaying the page, the forum engine parses the text and converts the bbCode into HTML code. On many forums, the ability to use BB codes is configured by the administrator individually for each forum section. Therefore, before using BB codes in messages, you need to make sure that they are allowed. Font formatting Basic tags for working with text: [p] Normal paragraph with indentation. A paragraph that can be styled. * Hereinafter, “style” is an analogue of style in HTML. text is similar in HTML text ** You can use other tags with [p] tags, such as [b], [i], [s], etc. Text whose properties can be changed using a style. A limited area that can be styled to change its properties (position, borders, padding, content properties, etc.). * By default, area boundaries are not visible. There can be several areas on one page at once. Text formatting: [b] Important text, bold [i] Important text, italics Just bold Just italics [u] Underlined text [s] Strikethrough text - same as option Smaller font Footnote mark above or index below text Deleted text Font sizes: 13 point font 15 point font 9 pixel font size Font size 12 pixels Font size 15 pixels Size 0 Size +1 Size +2 Possible font size options (visual assessment) are available. Headings: Level 1 header Level 2 header Level 3 header Level 4 header Level 5 Header Level 6 header Formatting text using fonts: Comic Sans Ms font Font Monotype Corsiva Tahoma font Possible options for font types (names and visual rating) are available. Decorating text using color: Red text * You can use standard verbal designations for colors: Red, Green, Blue, etc. Blue text * The number #0000ff means blue in the RGB palette. Blue background * The background color can also be changed. Blue text, gray background Some predefined colors: Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff Some colors in hex code are the intensity of red, green and blue (RR GG BB): #000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF Possible options for the color palette and their codes/names are available. Aligning text and formatting paragraphs Text alignment: Align text left Left alignment with style Left alignment in a paragraph Center text alignment Center alignment with style Center alignment in paragraph Align text to the right Right alignment with style Alignment in a paragraph to the right Align text on both sides Align on both sides with style Alignment in a paragraph on both sides * Alignment of texts on both sides is displayed for texts that are more than one line long. Formatting footnotes (comments) with paragraph indentation: [q] Quote in line Quote in line with properties Text quoted in a separate block, which will have a small indent on the left and a special design (forum style). Examples: Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Formatting paragraphs and areas: Hello! In this paragraph, the first sentence will be from the “red” line, i.e. indented. Just like in book printing. True, this is a rare practice on the Internet. Paragraphs should be separated by just blank spaces. Preformatted text maintains indentation on the left and between words and sets the indentation you specify with spaces. Warning! The tag does not automatically break the line! Formatting lists We use the or tag for bulleted lists: One of the list items Another such item One more point. [*] Another such item [*] One more point. For numbered lists we use the tag: One of the list items Another such item One more point. [*] One of the list items [*] Another such item [*] One more point. The closing tag is not required to be used: One of the list items Another such item One more point. [*] One of the list items [*] Another such item [*] One more point. It is also possible to directly specify the type of list: - numbered list - alphabetical list - a list numbered with Roman numerals Pictures Http://img.cx/img/primer.jpg - example of inserting a picture. Http://img.cx/img/primer.jpg - picture on the left. Http://img.cx/img/primer.jpg - picture on the right. * This code is similar to the code in HTML: Http://img.cx/img/primer.jpg - picture in the center. * This code is similar to the code in HTML: Similar tags with names and tooltips: Important! You cannot use quotation marks in the title of the picture! Http://img.cx/img/primer.jpg - example of inserting a picture. Http://img.cx/img/primer.jpg - picture on the left. Http://img.cx/img/primer.jpg - picture on the right. Http://img.cx/img/primer.jpg - picture in the center. Pictures with indicated sizes: Http://img.cx/img/primer.jpg - example of a picture with size. * This code is similar to the code in HTML: Http://img.cx/img/primer.jpg - picture on the left, with size. Http://img.cx/img/primer.jpg - picture on the right, with size. Inserting large images with scroll bars: Http://www..jpg - an image in the selected area if it is larger than the available display size on the forum. Address - open the image in a new window. * This code is similar to the code in HTML: Address - open the image in the same window. * This code is similar to the code in HTML: Related articles Review of the free version of AdwCleaner AdwCleaner: what is it How to turn your Android device into a wireless gamepad Wireless router Asus RT-N11P How to connect a new router asus rt n11p × Close Banks Beeline Money  Megaphone Motive MTS Telecom operators Tele2 Yandex Money Tag for creating a table. Defines the body of the table. Creates a table cell. Used to declare HTML code fragments that can be cloned and inserted into a document by a script. The content of a tag is not a child element. Creates large text input fields. Defines the table footer. Creates a table cell title. Defines the table title. Defines date/time. The title of an HTML document that appears at the top of the browser's title bar. May also appear in search results, so this should be taken into account when providing a title. Creates a table row. Adds subtitles for elements and . Highlights a passage of text by underlining, without additional emphasis. Creates a bulleted list. Highlights variables from programs by displaying them in italics. Adds video files to the page. Supports 3 video formats: MP4, WebM, Ogg. Indicates to the browser where a long line might break.