Joomla! To highlight the source code (3)

Published on| April 25th, 2009 | No Comment.

Categories:Extension |

Description:
In the previous ((1), (2)), can be colored by the language of every basic.

This time, I would like to explain how to easily set the background color and line number, but color.

As also previously described, Joomla! Content - Code Hightlighter (GeSHi) is, GeSHi is based.

GeSHi is, php is a class library.

GeSHi this will do to change the color definition.

So, you can change where and how the definitions can GeSHi colors, I would like to explain easily.

Reference (GeSHi online manual):

http://qbnz.com/highlighter/geshi-doc.html
1:

Joomla! To highlight the source code (1)
2 :

Joomla! To highlight the source code (2)
3 :

Joomla! To highlight the source code (3)
Download (original):

http://joomla.apres.net/index.php?option=com_content&view=section&layout=blog&id=7&Itemid=55
Download (GeSHiPus2: improved version):

GeSHiPlus2

Plugin that GeSHiPlus

There are plugins that GeSHiPlus.

This is, Hugo Jackson's, is the extension of the GPL was created.

Download the above (original):

In fact you can download Version 1.2 at.

However, I actually tried to use, difficult to understand Some of the documents, and a little bit, there was trouble.

Use, until you understand a little, I might take a long time (at least for me), and could understand a very simple (the idea) we understand it better.

(Hugo Jackson says, is bright.

)

So, GeSHiPlus what a plug-in that will explain.

GeSHiPlus is literally GeSHi plugin support.

Joomla! Included in the standard "Content - Code Hightlighter (GeSHi)" is a code embedded in the article, could not make out most of the way.

That is, GeSHiPlus plug-in that is provides a way to see whether the display of line numbers.

In other words, when you embed the code in the article, I'll give you that information at the same time, we might be able to freely switch.

I think it's easier because in the cases described in the following examples.

Normal "Code Hightlighter (GeSHi)", the parameters can be specified and was only language.

1	<pre xml:lang="php"><?php echo "test-print"; ?></pre>

As, xml: lang = "php" could only be used.

Also, WYSIWYG editor, and, pre If you can not use the tag (geshi)

Is the parameter can be specified as a plug-in can be replaced by a keyword.

The WYSIWYG plug-in parameters and if you selected and the r geshi editor who, after describing <pre ...> a (geshi ...)

And </ pre> a (/ geshi)

Please read and replace.

GeSHiPlus, let's add a line number

1	<pre xml:lang="php" lines="true"><?php echo "test-print"; ?></pre>

As, lines = "true" can be viewed by adding line numbers to specify.

parameters of the lines, true / false / fancy.

false: Do not display the line number (the same as if you do not specify anything).

fancy, are described above, please see there.

Let's clear the background color to yellow

As, background = "# ffffe0" You can change the background color by adding a designation.

parameters of the background, HTML color space can be specified.

For more information, please see the explanation after the default background color.

More clarity, let's add the highlighted line spacing in a certain

As, lines = "fancy" you can highlight a certain line number in the line spacing is to change the designation.

GeSHiPlus, is highlighted in the default line spacing.

Therefore, interval and set the parameters that should be able to specify the line spacing?

I think not.

(I think one of my problems)
Let's think about this problem later. Let's go ahead for this talk.

Let's change the color is linked to the same background color to highlight in the spacing

As, foreground = "# ffe0ff" you can change are highlighted and linked to it by adding a background color specified.

parameters of the foreground, HTML you can specify the color space.

For more information, please see the explanation after the default background color.

Finally, you specify the starting number of the line, but I'll try it

As, initial = "100" line number is specified by adding the 100 will begin.

initial default value is 1.

GeSHiPlus from GeSHiPlus2 to

The ending, GeSHiPlus is what works.

So far, but I also fully functional.

However, many are now viewing the source code for Version 1.2, you often do not display properly.

(Me at least.

)

Therefore, this provides GeSHiPlus2, defective parts (including the spacing specified) the revision, plus a hand that can be specified as the line spacing and background color specified in case you do not specify anything .

Plugin that GeSHiPlus2

GeSHiPlus and enhancements to cope with failure is as follows.

※ GeSHiPlus features are all covered.

Bug?

Deal with

fancy spacing problems at the time specified does not work
<br /> A newline character problems would be automatically converted to

Improvements

If the background color of the display line numbers, if you do not specify any color front, they can plug in a set of points on the screen had been fixed
Tags spit (pre tag, div tag) was added to specify the parameters (htag)
- htag = "pre" or not specified: the conversion information and pre-added to output tags.
  (GESHI_HEADER_PRE)
- htag = "div": div converted to output information to add tags.
  (GESHI_HEADER_DIV)
- htag = "valid":
  Conversion information is output to the pre-added the tag.
  If you do not print the line number, "pre" is the same as specified.
  
  If you want to output the line number, line number in the output div tag.
  
  Information for each listing, pre tag is used.
  
  "pre" and compared, it is slightly larger that means HTML output, the output is valid HTML.
  
  (GESHI_HEADER_PRE_VALID)
- htag = "table":
  Conversion information in the output table column.
  Left, pre-printed the tag line, pre tag second, and outputs the code that is colored.
  
  (GESHI_HEADER_PRE_TABLE)
- htag = "none": to transform the information as output.
  (GESHI_HEADER_NONE)
With additional parameters to cut a new line (precut, poscut, allcut)
precut, poscut, allcut parameters are, true / false only.
None specified, does not work.
- precut = "true": Ignore the new line to the first position from the specified source code.
- poscut = "true": Ignore the line breaks where the first source code from the specified end.
- allcut = "true": precut = "true" and poscut = "true" and behaves as specified.
Plugin-Japanese (and multi-language)

Let's use GeSHiPlus2

If you are GeSHiPlus2, GeSHiPlus please disable or uninstall the original version.

After the installation of the plugin management screen.

[Extension - Plug-in administration - Contents - Code Highlighter (GeSHiPlus2)]

To set the parameters, enable the plug-in at the end: ● Click Save and OK.

Parameter name	Meaning
Geshi Tags	pre geshi When you run this plug-in <pre ...> using the specified or (Geshi ...) Specified using either Services.
Default background color	Specifies the background color of the display line numbers. HTML in the same way as specified in the color space specified in # RRGGBB. RR: The degree of red (00 ~ FF) ※ must specify two digits GG: Green level (00 ~ FF) ※ must specify two digits BB: The degree of blue (00 ~ FF) ※ must specify two digits
Default foreground color	Fancy display line number specifies the background color of the highlighted line of the specified time. HTML in the same way as specified in the color space specified in # RRGGBB. RR: The degree of red (00 ~ FF) ※ must specify two digits GG: Green level (00 ~ FF) ※ must specify two digits BB: The degree of blue (00 ~ FF) ※ must specify two digits
Default line spacing	Fancy display line number specifies the line spacing of the lines highlighted in the specified time.

Let's see, which specifies the spacing of the highlighted

Highlight the line spacing for each line a try.

Specify the interval to 2.

Let's see you remove the first and last line breaks

Try to cut the first and last line breaks.

Specify the allcut true.

Please notice the difference between first line and last line.

You can look slightly embedded in the description whether this parameter.

In other words, pre written to the tag, HTML見DZURAKU to have the contents of what they see and where you want line breaks.

Let's change the HTML tags to output

The tag format output "valid" Let's use.

Specify a valid htag.

Let's look at the HTML output.

<div class="php" style="font-family:monospace;">
<ol><li style="font-weight: normal; vertical-align:top;background: #ffffe0;">
	<pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">
	<span style="color: #339933;"><</span>pre xml<span style="color: #339933;">:</span>
		lang<span style="color: #339933;">=</span><span style="color: #0000ff;">"php"</span>
		lines<span style="color: #339933;">=</span><span style="color: #0000ff;">"fancy"</span>
		background<span style="color: #339933;">=</span><span style="color: #0000ff;">"#ffffe0"</span>
		foreground<span style="color: #339933;">=</span><span style="color: #0000ff;">"#ffe0ff"</span>
		interval<span style="color: #339933;">=</span><span style="color: #0000ff;">"2"</span>
		allcut<span style="color: #339933;">=</span><span style="color: #0000ff;">"true"</span>
		htag<span style="color: #339933;">=</span><span style="color: #0000ff;">"valid"</span>
		<span style="color: #339933;">></span></pre></li>
		<li style="font-weight: bold; vertical-align:top;background: #ffe0ff;">
		<pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">    
		<span style="color: #0000ff;">'STYLES'</span> <span style="color: #339933;">=></span> 
		<a href="http://www.php.net/array"><span style="color: #990000;">array</span></a>
		<span style="color: #009900;">&#40;</span></pre>
	</li>
	:
	:
</ol>