Skip to content

Instantly share code, notes, and snippets.

@flydev-fr
Last active December 18, 2018 09:48
Show Gist options
  • Save flydev-fr/2021030d9696cb10b7bfb598559554ad to your computer and use it in GitHub Desktop.
Save flydev-fr/2021030d9696cb10b7bfb598559554ad to your computer and use it in GitHub Desktop.
<?php namespace ProcessWire;
/*
* https://processwire.com/talk/topic/14133-displaying-code-snippets-on-the-front-end-with-ckeditor/
*
* exemple working with highlightJS (https://highlightjs.org/)
* Howto:
* - include highlightjs css: <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css">
* - javascript: <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
* - write the following code in your main js script file eg: main.js
* $(document).ready(function() {
* $('pre code.code').each(function(i, block) {
* hljs.highlightBlock(block);
* });
* });
*
* OR use textFormatter:
*/
class TextformatterCodeHighlight extends Textformatter {
public static function getModuleInfo() {
return array(
'title' => 'TextformatterCodeHighlight',
'version' => 100,
'summary' => '... ',
);
}
public function format(&$str) {
$out = trim($str);
$search = array(
'<pre class="javascript">',
'<pre class="css">',
'<pre class="php">',
'</pre>'
);
$replace = array(
'<pre class="javascript hljs"><code class="language-javascript hljs code" data-pbcklang="javascript" data-pbcktabsize="4">',
'<pre class="css hljs"><code class="language-css hljs code" data-pbcklang="css" data-pbcktabsize="4">',
'<pre class="php hljs"><code class="language-php hljs code" data-pbcklang="php" data-pbcktabsize="4">',
'</code></pre>'
);
/*
$search = [
'<pre>',
'</pre>'
];
$replace = [
'<pre><code .code>',
'</code></pre>'
];
*/
$out = str_replace($search, $replace, $out);
$str = $out;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment