Code highlight using Event Manager

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Post Reply
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Code highlight using Event Manager

Post by rooon »

Hi all,

I have a question about the Event Manager using an UDT.
Below a code snippet where I want to replace <pre> into <pre class="coding"><code>
Also all <br /> in the <pre> element has to be replaced into PHP_EOL

In a test file it works fine, but in cmsms the output is not as espected.
Please somebody can help me out here?

Template

Code: Select all

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">

<!-- highlight code frontend -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/googlecode.min.css" rel="stylesheet">
<__script__ src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></__script>
<__script__>
document.addEventListener('DOMContentLoaded', function(e) {
  document.querySelectorAll('pre > code').forEach(function(e) {
    hljs.highlightBlock(e);
  });
});
</__script>
Content page (using <pre> in MicroTiny)

Code: Select all

<p>HTML</p>
<pre>&lt;div id="demo"&gt;  <br />  &lt;p class="blue"&gt;Een tekst&lt;/p&gt;<br />&lt;/div&gt;</pre>
<p>CSS</p>
<pre>#test {<br /> color: red;<br /> width: 80%;<br />}</pre>
<p>JavaScript</p>
<pre>window.addEventListener("load", function(event) {<br />  let total = 0;<br />  let items = document.querySelectorAll(".item)");<br />  for (let i=0; i &lt; items.length; i++) {<br />    total = total + items[i].value;<br />  }<br />});</pre>
UDT 'hightlight'

Code: Select all

$html = &$params['content'];
$regex = '/<pre>([\s\S.]*?)<\/pre>/';
$result = preg_replace_callback($regex, function ($matches) {
  return '<pre class="coding"><code>' . str_replace('<br />', PHP_EOL, $matches[1]) . "</code></pre>";
}, $html);
return $result;
Event Manger

Code: Select all

UDT 'hightlight' added to Core -> ContentPreCompile
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Re: Code highlight using Event Manager

Post by rooon »

Some extra info.

Clean installation of cmsms version 2.2.16
No modules added or removed.

Please somebody has a hint to try?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Code highlight using Event Manager

Post by velden »

I suppose you don't want to return the value but save it to $param['content'];
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Re: Code highlight using Event Manager

Post by rooon »

velden wrote: Wed Feb 01, 2023 1:54 pm I suppose you don't want to return the value but save it to $param['content'];
Correct. In short, code in the page content between <pre> and </pre> must be preserved for a code highlighter in the frontend.

a) any <br /> between <pre> </pre> must change into PHP_EOL
b) any special character between <pre> </pre> is preserved, for example { and }
c) <pre> is changed into <pre class="coding"><code> , and </pre> into </code></pre>

After a lot of trying, this is the new UDT.

Code: Select all

$html = &$params['content'];
$regex = '/<pre>([\s\S.]*?)<\/pre>/'; 
$html = preg_replace_callback($regex, function ($matches) {
    return '<pre class="coding"><code>' . preg_replace('/<br\s*\/?>/i', PHP_EOL, $matches[1]) . '</code></pre>';
}, $html);
return $html;
Image
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Code highlight using Event Manager

Post by velden »

It now works because you save your result to the $params['content'] (via the referring $html variable).
The UDT should not return anything in this case. So

Code: Select all

return $html;
should not be needed

The Event Manager passes a reference to the content (via $params['content']).
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Re: Code highlight using Event Manager

Post by rooon »

Thanx for the background info.
I removed the return $html from the UDT.
Post Reply

Return to “CMSMS Core”