Code highlighting test post. Using syntax highlighting plugin for testing this example out.

This function adds in the basic stylings that are common across all 'H' Header Elements

CLIENT SIDE DEBRIEF

Having gotten Prism.js and Highlight.js installed, working and rendering my example code, a few things jump out at me. The biggest one is language support. I am either going to have to enforce limits on what languages are going to be supported for highlighting, or figure out a way of cleverly loading what languages are referenced in the articles. The only other option would be to just include all languages and bite the bullet on file sizes.

PHIKI PHP Highlighting

Getting this up and running was a little weird, and it was a lot different than what I had to do for either Highlight.js or Prism.js. In order to call it from a Blade template, I made a quick helper that calls Phiki for me.

import Prism from 'prismjs';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-docker';
...
import 'prismjs/components/prism-php';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/themes/prism-okaidia.css';

Prism.manual = true;
Prism.highlightAll();

Comments

Add Comment

MAIN MENU