Adding PrismJS Syntax Highlighter
So, I've been learning lots of new things and I'm ready to write a couple posts
about my adventures with Angular 2. Before I do that, I wanted a syntax
highlighter so I can use prettified code snippets. There was a pretty
short list of requirements - theming options, line numbers, a copy button would be nice
to have and simple installation. I installed
GeSHi on a Drupal site a while back
and while it will do just about everything, I didn't want to spend days reading the docs.
I looked at several options and settled on Prism.
It's not ideal, by the time I had it all looking close to how I wanted it, there were a lot of divs
which I find hard to keep track of. Using <pre>
tags also means you can't indent
the code to match the rest of the page. But as Billy Crystal said "It's more important to look good than to feel good."
For basic usage and simple installation, the Prism site can roll a customized
prism.js and prism.css. Include those in
your page, enclose the code you want to show off in <pre>
and <code>
tags, add the appropriate class and your good to go. You can get the project from Github
and load the pieces separately. It's handy trying things out and allows you
to only load the language files you need for the particular page you're writing. This page includes the plugins Line Numbers,
Remove initial line feed, and Unescaped Markup.
Adding A Copy Button with clipboardjs
Instead of using the Copy to Clipboard plugin from Prism, I went with clipboard.js. I haven't gotten the button style quite the way I want it yet, but it's still a pretty nifty addition to Prism. There are a number of ways to work with clipboard.js, the way I did it was:
<script src="/_assets/js/clipboard.min.js"></script>
I decided to use a strategy where clipboard.js identifies the trigger(s) via DOM selector (in this case,
the btn-copy class) and the target is set using data-clipboard-target
in the
trigger element (in this case <button>
.
The value of data-clipboard-target
matches the target's element selector (in this case the id
of the <pre>
tag).
I also created a button with an image and used positioning to place it in the corner of the syntax highlighter box and set the initial opacity to 0.3. clipboard.js exposes custom events for success and error and I took advantage of that to indicate the copy was successfull.
var clipboard = new Clipboard('.btn-copy');
clipboard.on('success', function(e) {
var img = '
';
e.trigger.blur();
e.trigger.innerHTML = '✔';
window.setTimeout(function () {
e.trigger.innerHTML = img;
}, 1000);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
e.trigger.innerHTML = '';
event.trigger.textContent = 'Press "Ctrl + C" to copy';
window.setTimeout(function () {
e.trigger.innerHTML = img;
}, 2000);
});
Or Maybe...
I am hand coding the HTML for the web site and it seems like a lot of work to do the syntax highlighting, so I'll be looking for something easier. Github's embeddable Gists only require adding a script tag but lack the prettified syntax highlighting and copy button. Pretty or easy? Hmmm...
-- Laura