Synlighter is a simple syntax highlighting plugin I developed a while ago. I used it primarily as an exercise to study regular expressions, so it is still far from being called a complete product and it only supports HTML, CSS and JS highlighting. Sadly, I'm no longer developing it so don't expect any updates in the future.
Demo and source code
You can find the source code on Synlighter's GitHub page. Below is a quick demo of its functionality. As said above, it was never meant to be ready for production so I apologise if it doesn't display correctly in your browser. Also, because of the vast amount of regular expressions used it might take a while to load. Just so you know, I reflected on all of the mistakes made during the development of Synlighter and although I will likely not fix them in this project, I will definitely prevent them in every project to come.
Highlighting HTML
<![CDATA[
<nav class="foxy-navigation" role="navigation">
<ul>
<li class="foxy-navigation-home" role="presentation">
<a href="https://foxypanda.me/">
<h1>Home</h1>
</a>
</li><!-- .foxy-navigation-home -->
<li class="foxy-navigation-about" role="presentation">
<a href="https://foxypanda.me/about/">
<h1>About</h1>
</a>
</li><!-- .foxy-navigation-about -->
<li class="foxy-navigation-admin" role="presentation">
<a href="https://foxypanda.me/ghost/">
<h1>Admin</h1>
</a>
</li><!-- .foxy-navigation-admin -->
</ul>
</nav><!-- .foxy-navigation -->
]]>
Highlighting JavaScript
<![CDATA[
window.onpopstate = function(event) {
// Why not use console?
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
if(event.state != null)
load_page(event.state.url);
};
function OSONG() {
var adjective = null;
var noun = null;
var random = null;
if(getRandomInt(0, 1)) {
random = getRandomInt(0, giesLength - 1);
adjective = gies[random] + "ic";
} else {
random = getRandomInt(0, icsLength - 1);
adjective = ics[random];
}
random = getRandomInt(0, giesLength - 1);
noun = gies[random] + "ist";
output.addClass('active');
output.val(adjective + " " + noun);
output.removeClass('active');
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
]]>
Highlighting CSS
<![CDATA[
/*
* Syntax -> Code
*/
.synlighter-syntax-code {
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.doodle input:checked ~ .animate {
/* We will set a delay so that the rewind effect can occur */
-webkit-animation: horse-ride .5s steps(12, end) infinite 5s;
-moz-animation: horse-ride .5s steps(12, end) infinite 5s;
animation: horse-ride .5s steps(12, end) infinite 5s;
/* Imitating the Rewind effect before real animation starts */
-webkit-transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
background-position: -2412px 0;
}
.doodle div.g:after {
background: rgba(53, 97, 182, 0.5);
}
]]>
