The Code Container - GeSHi/geshi-1.0 GitHub Wiki

The Code Container has a fundamental effect on the layout of your code before you even begin to style. What is the Code Container? It’s the bit of markup that goes around your code to contain it. By default your code is surrounded by a <pre>, but you can also specify a <div>.

The <pre> header is the default. If you’re familiar with HTML you’ll know that whitespace is rendered “as is” by a <pre> element. The advantage for you is that if you use <pre> the whitespace you use will appear pretty much exactly how it is in the source, and what’s more GeSHi won’t have to add a whole lot of <br />’s and non-breaking spaces ( ) to your code to indent it. This saves you source code (and your valuable visitors waiting time and your bandwidth).

But if you don’t like <pre> or it looks stupid in your browser no matter what styles you try to apply to it or something similar, you might want to use a <div> instead. A <div> will result in more source - GeSHi will have to insert whitespace markup - but in return you can wrap long lines of code that would otherwise have your browser’s horizontal scrollbar appear. Of course with <div> you can not wrap lines if you please. The highlighter demo at the GeSHi home page uses the <div> approach for this reason.

At this stage there isn’t an option to wrap the code in <code> tags (unless you use the function geshi_highlight), partly because of the inconsistent and unexpected ways stuff in <code> tags is highlighted. Besides, <code> is an inline element. But this may become an option in future versions.

As of GeSHi 1.0.7.2 there is a new header type, that specifies that the code should not be wrapped in anything at all.

Another requested addition has been made in GeSHi 1.0.7.20 to force GeSHi to create a block around the highlighted source even if this wasn’t necessary, thus styles that are applied to the output of GeSHi can directly influence the code only even if headers and footers are present.

To change/set the header to use, you call the set_header_type() method. It has one required argument which defines the container type. Available are:

• $geshi->set_header_type(GESHI_HEADER_DIV);

  • Puts a <div> around both, code and linenumbers. Whitespace is converted to   sequences (i.e. one whitespace and the html entity of a non-breaking whitespace) to keep your indendation level in tact. Tabs are converted as well and you can manually define the tab-width. Lines are automatically wrapped. Linenumbers are created using an ordered list.

• $geshi->set_header_type(GESHI_HEADER_PRE);

  • Wraps code and linenumbers in a <pre> container. This way whitespace is kept as-is and thus this header produces less overhead then the GESHI_HEADER_DIV header type. Since linenumbers are still created using an ordered list this header type produces invalid HTML.

• $geshi->set_header_type(GESHI_HEADER_PRE_VALID);

  • Available since 1.0.8
  • When linenumbers are disabled, this behaves just like GESHI_HEADER_PRE. In the other case though, a <div> is used to wrap the code and linenumbers and the <pre> is put inside the list items (<li>). This means slightly larger HTML output compared to GESHI_HEADER_PRE, but the output is valid HTML.

• $geshi->set_header_type(GESHI_HEADER_PRE_TABLE);

  • Available since 1.0.8
  • Once again a <div> tag wraps the output. This time though no ordered list is used to create an ordered list, but instead we use a table with two cells in a single row. The left cell contains a <pre> tag which holds all linenumbers. The second cell holds the highlighted code, also wrapped in a <pre> tag, just like with GESHI_HEADER_PRE.
  • This produces valid HTML and works around the nasty selection behaviour of Firefox and other Gecko based browsers, see SF#1651996 for more information.

• $geshi->set_header_type(GESHI_HEADER_NONE);

  • Available since 1.0.7.2
  • No wrapper is added.

Those are the only arguments you should pass to set_header_type. Passing anything else may cause inconsistencies in what is used as the Code Container (although it should simply use a <pre>). Better not to risk it.

👉 Note:

GESHI_HEADER_DIV, GESHI_HEADER_PRE, etc. are constants, so don’t put them in strings!

❗ Caution:

The default styles for the <pre> and <div> will be different, especially if you use line numbers!

I have found that a <pre> results in code that is smaller than for that of a <div>, you should rectify this difference by using set_overall_style() if you need to. But be aware of this difference for if you are changing the header type!