HTML Purifier is breaking SyntaxHighlighter - ckeditor

I'm using the SyntaxHighlighter plugin for CKEditor to insert code into my pages. The plugin uses <pre> tags to contain the code whilst making use of "brush" classes to define the programming language. My problem is that upon submission of the page HTML Purifier is stripping the class attribute from the pre tags, which effectively prevents the syntax highlighting from occurring.
The source code goes from:
<pre class="brush:php;">
<?php echo '<p>Hello World</p>'; ?>
</pre>
to:
<pre>
<?php echo '<p>Hello World</p>'; ?>
</pre>
I'm hoping there is some magical setting to stop HTML Purifier from doing this.

The reason is brush:php is not a valid class name per the HTML4 specification. I guess you could write your own class name validator and override the builtin using http://htmlpurifier.org/docs/enduser-customize.html
But a better solution might be to run the syntax highlighting before you run HTML Purifier!

Related

Processwire Add css class to page

I there a possibility to add a classname to a page?
I can't figure out how to implement such feature or if it already exists.
I'm using Processwire 3.0.42.
Put something like this in your template where the body is:
<body class="<?php echo $page->template->name; ?>">
That will give your page body tag a class equal to page template name.
You can add a page title in the same way.
<body class="<?php echo $page->name; ?>">
Don't be worried about adding a class to every page. The overhead of doing this is negligible.
If you wish to add a different class you would need to add a field to your template and append it to the code above.
As always in ProcessWire, everything is under your control. Alternatives to #ivangretsky's perfectly good answer would include-
Simply include a conditional in your template file. (This doesn't scale well if you need to add other classes to other pages using the same template.)
<?php
$bodyClass = '';
if($page->id == 1021) $bodyClass = 'my-class';
?>
<body class="<?php echo $bodyClass; ?>">
NB Using $page->id is better than $page->name, for example, as the ID doesn't change while the name could.
You could also add a field to the page template definition. Add a field called something like 'Body Class'. Then use the content of that field in your template file.
<body class="<?php echo $page->body-class; ?>">
This will scale better than my other suggestion, and there are options in the ProcessWire backend to hide or partially hide the field during normal use if you don't want users messing with its value.
One 'gotcha' from the CSS spec to be aware of is that CSS identifiers, including class names and IDs cannot start with a digit, so you cannot just use $page->id.
There are lot of options and it depends on your needs and maybe imagination :-).
You can use page name, template name, page id, or maybe combination.
<body class="<?php echo $page->template->name; ?> page-id-<?php echo $page->id; ?>">
// Output
<body class="your-template-name page-id-1234">
This way you can target template, page, or both.
Or, as mentioned by #ivangretsky, you can add custom field to page. And again, you can combine this aproach with template name, etc.
It depends on your needs and what you want to achieve.
Notice:
Using $page->id is better than $page->name, as the ID doesn't change while the name could. #DaveP

Linebreak in magento product description when NOT using wysiwyg

I have a Magento webshop with over 17.000 products. Products and their description are imported from CSV files. The descriptions have linebreaks in them - but these are not translated to the frontend view due to the fact the Wysiwyg editor isn't used.
I have found tons of ways to remove extra linebreaks when the wysiwyg editor is used, but none that would help me to add linebreaks when the text editor is used.
Is it possible to automatically add these linebreaks or paragraphs to the content in the normal / standard text editor automatically? And if so, how do I best proceed?
It may be that your theme overrides the default behaviour in Magento with regard to applying line breaks via php. In the file;
app\design\frontend\base\default\template\catalog\product\view\description.html
You'll see it outputs the description like;
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
It may be that the easiest thing to do is use the same technique used with the short description in the base package and apply the php function nl2br to it to get your imported line breaks;
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), nl2br($_description), 'description') ?>

CKEDITOR's source code mode scrambles custom template code

I'm trying to allow custom "template code" within the source code editor. My code snippets would always look like {* anything here *}. It mostly works, but if used inside an HTML tag things gets scrambled.
I'm already using allowedContent: true, when starting CKEDITOR.
Example:
<p style="{* some "short code" of mine... *}">Text</p>
turns into
<p style="{* some " short="" code"="" of="" mine...="" *}"="">Text</p>
And
<p {* tet_pos_is_inside *}>Fuss</p>
into
<p {*="" tet_pos_is_inside="" *}="">Fuss</p>
Any advise ?
Thanks,
Sebastian
My advise would be to never use them inside tags, it sounds like a nightmare to configure. What is the requirement you are trying to fill with those?
You could go around this issue with pre- and post processing using classes, data attributes and/or custom attributes. For example you could use something like his:
<p class="tet_pos_is_inside_val-12345 foo-val-12345">I love horses</p>
<p data-tet_pos_is_inside="12345" data-foo="">I love bunnies</p>
<p tet_pos_is_inside="12345" foo="">I love cats</p>
Well,
apparently there was a simple solution to solve my current problem:
<p style="{* some 'short code' of mine... *}">Text</p>
works ! Note the use of singe-quotes inside the double quotes.
IOW, as long as there is a <tag attr="val"> then val can be anything except containing more double quotes.
Thanks for the comments.

Fancybox data-fancybox-type="iframe" and Strict XHTML Doctype

Is there a way to use data-fancybox-type="iframe" with strict xhmtl at all so that it validates? I have everything working except for that error that I get.
Is there a way to write it so that it works with my current doctype?
Since the data-* attribute validates only with HTML5, you may prefer to use the fancybox special class to set the content type, so instead of this :
<a class="fancybox" data-fancybox-type="iframe" href="page.html">open</a>
... try :
<a class="fancybox fancybox.iframe" href="page.html">open</a>
... then your document will validate with your current DOCTYPE and it will have exactly the same effect.

How to fetch() sub-parts of a Smarty template

Background Smarty is a templating engine that separates the presentation layer from the logic layer of web applications. It is well-suited for the Model-View-Control approach to developing web applications. The View can be represented by Smarty templates, which contain only HTML and Smarty tags. The Control can be implemented by PHP files that serve the appropriate views based on the logic contained within them via PHP code. The View is instantiated by displaying the templates via the display() command. Alternatively, a template can be read in as a variable without displaying it via the fetch() command. The file name of the template is the argument to both these commands.
Issue The fetch() command can read an entire template. In order to read parts/sub-parts of a template, each of these parts would normally needed to be stored in a separate file with its own name that can be the argument to the command. This creates needless files.
Question Is it possible to fetch only parts of a Smarty template by somehow marking sections of the template?
Case example Below I present a sample template file with Smarty and HTML tags, as well as the corresponding controller file with PHP code.
Template file (index.tpl)
<html>
<body>
<div id="sec1">
First section
</div>
<div id="sec2">
Second section
</div>
</body>
</html>
Controller file (index.php)
<?php
$smarty = new Smarty;
$template = $smarty->fetch("index.tpl");
?>
In the example above, the $template variable would contain the full output from the template page. Below is a dump of its contents from the example.
$template => string(255)
"<html><body>
<div id="sec1">First section</div>
<div id="sec2">Second section</div>
</body></html>"
However, suppose I wish to read in the code from each of the DIV containers separately, and store them into separate variables, how could I achieve this? For instance, suppose I have a magical function called fetch_sub(). Here's my expectations of using it.
<?php
$smarty = new Smarty;
$div1 = $smarty->fetch_sub("index.tpl", "sec1");
$div2 = $smarty->fetch_sub("index.tpl", "sec2");
?>
Then $div1, etc would contain only the relevant sub-part, instead of the whole template.
Other info I am not a beginner with Smarty and have a fairly good handle on basic concepts, as well as some of Smarty's advanced concepts. Following is my attempts so far at conceptualizing the problem and getting to a solution. My initial rough idea is to demarcate the template into sections using {capture}, and then somehow reference each of these sections. I present an outline example of the idea below.
{capture name=sec1}
<div id="sec1">
First section
</div>
{/capture}
. . .
Smarty (as of Smarty 3.1) has no built-in feature to allow you achieving your goal. I had proposed something similar in 2011, but we haven't come around to implementing it.
Maybe you can have the generated HTML parsed to DOM and help yourself with xpath, or something like that?
You can try this:
sec1.tpl
<div id="sec1">First section</div>
sec2.tpl
<div id="sec2">Second section</div>
index.tpl
<html><body>
{include file="sec1.tpl"}
{include file="sec2.tpl"}
</body></html>
And then You can fetch parts by invoking:
$smarty = new Smarty;
$div1 = $smarty->fetch("sec1.tpl");
$div2 = $smarty->fetch("sec2.tpl");

Resources