No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

gulp-prism

npm npm

Check it out on npm!

About

Pipe code snippets through Prism using gulp to pre-tag code blocks at compile time. This only applies to code blocks formatted properly using both the pre and code tags (i.e. <pre><code>) and that have a specified {lang|language}-{LANG_NAME} class on the code tag. See the usage section for more information.

Install

npm install gulp-prism --save-dev

Usage

gulpfile.js

var gulp = require('gulp');
var highlight = require('gulp-prism');

gulp.task('default', function () {
	gulp.src('src/index.html')
		.pipe(highlight())
		.pipe(gulp.dest('dist'));
});

src/index.html

Input

<pre><code class="language-html">&lt;div&gt;
	This will be highlighted!
&lt;div&gt;</code></pre>

Output

<pre><code class="language-html prism"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    This will be highlighted!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span></code></pre>

Notes

  • You must specify the snippet language on the <code> tag or else the code block will not be highlighted.

  • You must use escaped HTML within the <pre><code> block.

  • Code blocks that have been highlighted using Prism will have the prism class added to them. Similarly, code blocks that were not highlighted will have the no-prism class added to them.

Known Issues

  • No CSS is included. This is intentional as this library is only intended to pre-wrap code snippets within code blocks using Prism's semantic tags. You are required to define and include your own CSS. An example SCSS file can be found here.

  • Plugins are currently not supported. Feel free to submit a pull request to help get the ball moving!