HTML character codes. Reminder for using BB codes (bbCode) Connecting a code execution script

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 are enclosed in 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

Font size 9 pixels

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 #AFEE EE #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 in length.

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 simply 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

Images

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:

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 the 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 with special characters &.. 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 the appearance of the 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.

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.

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 – displays an additional button in a text editor. 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 insert html tags into plain text without conversion?

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 Study

Let'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