Support ⇒ Dragonfly CMS v10 ⇒ JavaScript based syntax highlighting ⇒ Community Forums ⇒ CPG Dragonfly™ CMS
Forum IndexDragonfly CMS v10

JavaScript based syntax highlighting Reply to topic


Added JavaScript based syntax highlighting to offload server load to the client and have more options.
BBCode and Wiki now use this.

I found a good forum post as example so you may test if it works good: /Forums/viewtopic/p=152128.html#152128

You can use the bbcode [code=*] where * is one of:
  • css
  • html
  • javascript / js
  • php
  • sql
  • xml

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial

Last edited by DJ Maze on Fri Jul 22, 2016 1:26 am; edited 1 time in total


Very cool.

Test Signature

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):


Very useful! And it dispenses with a format button - php - which non-programmers find very confusing.

Is this independent of v10 - or v10's version of poodle, eg? Ie could I back-port it to v9 or is there some other dependency I haven't seen yet?

TIA!

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4


layingback wrote
Is this independent of v10 - or v10's version of poodle, eg? Ie could I back-port it to v9 or is there some other dependency I haven't seen yet?


The bbcode parser converts the [code=*] and [php] tags to <code data-type="*"><pre>

Secondly here's the javascript bitbucket.org/dragonfl...ew-default

It uses some non-DOM prototype extensions that poodle.js loads, like:
HTMLElement.addClass('name');
// versus
HTMLElement.classList.add('name');
Note: classList is of type DOMTokenList which is supported by: Chrome 8, Firefox 3.6, IE 10, Opera 11.5, Safari 5.1

and:
HTMLElement.data('type');
// versus
HTMLElement.getAttribute('data-type');


and:
Poodle.onDOMReady(function(){
	var i=-1, n, nodes = Poodle.$Q("code");
	while (n = nodes[++i]) {
		SyntaxHighlight.highlight(n);
	}
});
// versus
document.addEventListener('DOMContentLoaded', function(){
	var i=-1, n, nodes = document.querySelectorAll("code");
	while (n = nodes[++i]) {
		SyntaxHighlight.highlight(n);
	}
}, false);


And it uses a PHP equivelant function from poodle.js
strip_tags = (function(m){
	return function(str) { return str.replace(m, '').trim(); };
})(/<\s*\/?\s*(\w+|!)[^>]*>/gi);


So yeah, some things need to be changed for v9.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial


Thanks for the detailed response! 😎

Had deduced the first 2, but would have taken a while to figure out the rest! So thanks. Looks a tad over my pay grade, but I'll give it a try.

Have already enhanced my nbbcode.php to use a single background image, as suggested here. Has the side advantage of the reDesign version also working for the DFcore version, as they can now use the same graphics.

Would also need to add the pop-out option, like on emoji here, to select the various code= options. Then I could drop the PHP button (but leave the php code support for backward compatibility).

Pro_News CM™ - Content Management for Dragonfly CMS™

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux / 1.3.39 - 2.4.9 / 5.5.42 - 5.6.16 / 5.4.37 - 5.5.11 / 9.4

All times are UTC


Jump to: