App::ZofCMS::Plugin::Syntax::Highlight::CSS - provide syntax highlighted CSS code snippets on your site
In ZofCMS template:
{ body => \'index.tmpl', highlight_css => { foocss => '* { margin: 0; padding: 0; }', bar => sub { return '* { margin: 0; padding: 0; }' }, beer => \ 'filename.of.the.file.with.CSS.in.datastore.dir', }, plugins => [ qw/Syntax::Highlight::CSS/ ], }
In HTML::Template template:
<tmpl_var name="foocss"> <tmpl_var name="bar"> <tmpl_var name="beer">
The module is a plugin for App::ZofCMS. It provides means to include CSS (Cascading Style Sheets) code snippets with syntax highlights on your pages.
This documentation assumes you've read App::ZofCMS, App::ZofCMS::Config and App::ZofCMS::Template
plugins
{ plugins => [ qw/Syntax::Highlight::CSS/ ], }
First and obvious is that you'd want to include the plugin in the list of plugins to run.
highlight_css
{ highlight_css => { foocss => '* { margin: 0; padding: 0; }', bar => sub { return '* { margin: 0; padding: 0; }' }, beer => \ 'filename.of.the.file.with.CSS.in.datastore.dir', }, }
The highlight_css is the heart key of the plugin. It takes a hashref as a value. The keys of this hashref except for two special keys described below are the name of <tmpl_var name=""> tags in your HTML::Template template into which to stuff the syntax-highlighted code. The value of those keys can be either a scalar, subref or a scalarref. They are interpreted by the plugin as follows:
<tmpl_var name="">
highlight_css => { foocss => '* { margin: 0; padding: 0; }' }
When the value of the key is a scalar it will be interpreted as CSS code to be highlighted. This will do it for short snippets.
highlight_css => { beer => \ 'filename.of.the.file.with.CSS.in.datastore.dir', },
When the value is a scalarref it will be interpreted as the name of a file in the data_store dir. That file will be read and its contents will be understood as CSS code to be highlighted. If an error occured during opening of the file, your <tmpl_var name=""> tag allocated for this entry will be populated with an error message.
data_store
highlight_css => { bar => sub { return '* { margin: 0; padding: 0; }' }, },
When the value is a subref, it will be executed and its return value will be taken as CSS code to highlight. The @_ of that sub when called will contain the following: $template, $query, $config where $template is a hashref of your ZofCMS template, $query is a hashref of the parameter query whether it's a POST or a GET request, and $config is the App::ZofCMS::Config object.
@_
$template, $query, $config
$template
$query
$config
highlight_css => { nnn => 1, pre => 0, },
There are two special keys, namely nnn and pre, in highlight_css hashref. Their values will affect the resulting highlighted CSS code.
nnn
pre
highlight_css => { nnn => 1, }
Instructs the highlighter to activate line numbering. Default value: 0 (disabled).
0
highlight_css => { nnn => 0, }
Instructs the highlighter to surround result by <pre>...</pre> tags. Default value: 1 (enabled).
1
highlight_css_before
{ highlight_css_before => '<div class="my-highlights">', }
Takes a scalar as a value. When specified, every highlighted CSS code will be prefixed with whatever you specify here.
highlight_css_after
{ highlight_after => '</div>', }
Takes a scalar as a value. When specified, every highlighted CSS code will be postfixed with whatever you specify here.
Given '* { margin: 0; padding: 0; }' as input plugin will generate the following code (line-breaks were edited):
'* { margin: 0; padding: 0; }'
<pre class="css-code"> <span class="ch-sel">*</span> { <span class="ch-p">margin</span>: <span class="ch-v">0</span>; <span class="ch-p">padding</span>: <span class="ch-v">0</span>; } </pre>
Now you'd use CSS to highlight specific parts of CSS syntax. Here are the classes that you can define in your stylesheet:
css-code - this is actually the class name that will be set on the <pre>> element if you have that option turned on.
css-code
<pre>>
ch-sel - Selectors
ch-sel
ch-com - Comments
ch-com
ch-p - Properties
ch-p
ch-v - Values
ch-v
ch-ps - Pseudo-selectors and pseudo-elements
ch-ps
ch-at - At-rules
ch-at
ch-n - The line numbers inserted when nnn key is set to a true value
ch-n
.css-code { font-family: 'DejaVu Sans Mono Book', monospace; color: #000; background: #fff; } .ch-sel, .ch-p, .ch-v, .ch-ps, .ch-at { font-weight: bold; } .ch-sel { color: #007; } /* Selectors */ .ch-com { /* Comments */ font-style: italic; color: #777; } .ch-p { /* Properties */ font-weight: bold; color: #000; } .ch-v { /* Values */ font-weight: bold; color: #880; } .ch-ps { /* Pseudo-selectors and Pseudo-elements */ font-weight: bold; color: #11F; } .ch-at { /* At-rules */ font-weight: bold; color: #955; } .ch-n { color: #888; }
This plugin requires Syntax::Highlight::CSS. You can use zofcms_helper script to locally place it into ZofCMS "core" directory:
zofcms_helper
zofcms_helper --nocore --core your_sites_core --cpan Syntax::Hightlight::CSS
Zoffix Znet, <zoffix at cpan.org> (http://zoffix.com, http://haslayout.net)
<zoffix at cpan.org>
Please report any bugs or feature requests to bug-app-zofcms-plugin-syntax-highlight-css at rt.cpan.org, or through the web interface at http://rt.cpan.org/NoAuth/ReportBug.html?Queue=App-ZofCMS-Plugin-Syntax-Highlight-CSS. I will be notified, and then you'll automatically be notified of progress on your bug as I make changes.
bug-app-zofcms-plugin-syntax-highlight-css at rt.cpan.org
You can find documentation for this module with the perldoc command.
perldoc App::ZofCMS::Plugin::Syntax::Highlight::CSS
You can also look for information at:
RT: CPAN's request tracker
http://rt.cpan.org/NoAuth/Bugs.html?Dist=App-ZofCMS-Plugin-Syntax-Highlight-CSS
AnnoCPAN: Annotated CPAN documentation
http://annocpan.org/dist/App-ZofCMS-Plugin-Syntax-Highlight-CSS
CPAN Ratings
http://cpanratings.perl.org/d/App-ZofCMS-Plugin-Syntax-Highlight-CSS
Search CPAN
http://search.cpan.org/dist/App-ZofCMS-Plugin-Syntax-Highlight-CSS
Copyright 2008 Zoffix Znet, all rights reserved.
This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.
To install App::ZofCMS::Plugin::Syntax::Highlight::CSS, copy and paste the appropriate command in to your terminal.
cpanm
cpanm App::ZofCMS::Plugin::Syntax::Highlight::CSS
CPAN shell
perl -MCPAN -e shell install App::ZofCMS::Plugin::Syntax::Highlight::CSS
For more information on module installation, please visit the detailed CPAN module installation guide.