Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autoloader Plugin #766

Merged
merged 3 commits into from
Sep 22, 2015
Merged

Autoloader Plugin #766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42094ee
Autoloader Plugin
Golmote Sep 10, 2015
0064ec8
Autoloader Plugin: small fixes + code style
Golmote Sep 11, 2015
b9a48c0
Merge branch 'gh-pages' into prism-autoload
Golmote Sep 22, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,11 @@ var components = {
"title": "Previewer: Color",
"require": "previewer-base",
"owner": "Golmote"
},
"autoloader": {
"title": "Autoloader",
"owner": "Golmote",
"noCSS": true
}
}
};
49 changes: 37 additions & 12 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ var gulp = require('gulp'),
'plugins/file-highlight/prism-file-highlight.js'
],
plugins: ['plugins/**/*.js', '!plugins/**/*.min.js'],
showLanguagePlugin: 'plugins/show-language/prism-show-language.js'
showLanguagePlugin: 'plugins/show-language/prism-show-language.js',
autoloaderPlugin: 'plugins/autoloader/prism-autoloader.js'
};

gulp.task('components', function() {
Expand All @@ -37,7 +38,7 @@ gulp.task('build', function() {
.pipe(gulp.dest('./'));
});

gulp.task('plugins', ['show-language-plugin'], function() {
gulp.task('plugins', ['languages-plugins'], function() {
return gulp.src(paths.plugins)
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
Expand All @@ -49,7 +50,7 @@ gulp.task('watch', function() {
gulp.watch(paths.plugins, ['plugins', 'build']);
});

gulp.task('show-language-plugin', function (cb) {
gulp.task('languages-plugins', function (cb) {
fs.readFile(paths.componentsFile, {
encoding: 'utf-8'
}, function (err, data) {
Expand All @@ -59,25 +60,49 @@ gulp.task('show-language-plugin', function (cb) {
data = JSON.parse(data);

var languagesMap = {};
var dependenciesMap = {};
for (var p in data.languages) {
if (p !== 'meta') {
var title = data.languages[p].displayTitle || data.languages[p].title;
var ucfirst = p.substring(0, 1).toUpperCase() + p.substring(1);
if (title !== ucfirst) {
languagesMap[p] = title;
}

if(data.languages[p].require) {
dependenciesMap[p] = data.languages[p].require;
}
}
}

var jsonLanguages = JSON.stringify(languagesMap);
var stream = gulp.src(paths.showLanguagePlugin)
.pipe(replace(
/\/\*languages_placeholder\[\*\/[\s\S]*?\/\*\]\*\//,
'/*languages_placeholder[*/' + jsonLanguages + '/*]*/'
))
.pipe(gulp.dest(paths.showLanguagePlugin.substring(0, paths.showLanguagePlugin.lastIndexOf('/'))));
stream.on('error', cb);
stream.on('end', cb);
var jsonLanguagesMap = JSON.stringify(languagesMap);
var jsonDependenciesMap = JSON.stringify(dependenciesMap);

var tasks = [
{plugin: paths.showLanguagePlugin, map: jsonLanguagesMap},
{plugin: paths.autoloaderPlugin, map: jsonDependenciesMap}
];

var cpt = 0;
var l = tasks.length;
var done = function() {
cpt++;
if(cpt === l) {
cb && cb();
}
};

tasks.forEach(function(task) {
var stream = gulp.src(task.plugin)
.pipe(replace(
/\/\*languages_placeholder\[\*\/[\s\S]*?\/\*\]\*\//,
'/*languages_placeholder[*/' + task.map + '/*]*/'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mAAdhaTTah: Here is where the magic happens.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was just wondering if the comment needed to be included in the final product. It's not a huge deal :).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, it is discarded in the minified version of the plugin :D

))
.pipe(gulp.dest(task.plugin.substring(0, task.plugin.lastIndexOf('/'))));

stream.on('error', done);
stream.on('end', done);
});

} catch (e) {
cb(e);
Expand Down
106 changes: 106 additions & 0 deletions plugins/autoloader/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Autoloader ▲ Prism plugins</title>
<base href="../.." />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>
</head>
<body>

<header>
<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>

<h2>Autoloader</h2>
<p>Automatically loads the needed languages to highlight the code blocks.</p>
</header>

<section class="language-javascript">
<h1>How to use</h1>

<p>
The default usage does not require anything to be done. The plugin will automatically handle missing grammars and load them for you.
However, a couple of options are available through the configuration object <code>Prism.plugins.autoloader</code>.
</p>

<h2>Specifying the grammars path</h2>

<p>
By default, the plugin will look for the missing grammars in the <code>components</code> folder.
If your files are in a different location, you can specify it using the <code>languages_path</code> option:
</p>

<pre><code>Prism.plugins.autoloader.languages_path = 'path/to/grammars/';</code></pre>

<h2>Using development versions</h2>

<p>
By default, the plugin uses the minified versions of the grammars.
If you wish to use the development versions instead, you can set the <code>use_minified</code> option to false:
</p>

<pre><code>Prism.plugins.autoloader.use_minified = false;</code></pre>

<h2>Specifying additional dependencies</h2>

<p>
All default dependencies are already included in the plugin.
However, there are some cases where you might want to load an additional dependency for a specific code block.
To do so, just add a <code>data-dependencies</code> attribute on you <code>&lt;code></code> or <code>&lt;pre></code> tags,
containing a list of comma-separated language aliases.
</p>

<pre><code class="language-markup">&lt;pre>&lt;code class="language-jade" data-dependencies="less">
:less
foo {
color: @red;
}
&lt;/code>&lt;pre></code></pre>

<h2>Force to reload a grammar</h2>

<p>
The plugin usually don't reload a grammar if it already exists.
In some very specific cases, you might however want to do so.
If you add an exclamation mark after an alias in the <code>data-dependencies</code> attribute,
this language will be reloaded.
</p>

<pre><code class="language-markup">&lt;pre class="language-markup" data-dependencies="markup,css!">&lt;code></code></pre>

</section>

<section>
<h1>Examples</h1>

<p>Note that no languages are loaded on this page by default.</p>

<p>Basic usage with some Perl code:</p>
<pre><code class="language-perl">my ($class, $filename) = @_;</code></pre>

<p>The Less filter used in Jade:</p>
<pre><code class="language-jade" data-dependencies="less">:less
foo {
color: @red;
}</code></pre>

</section>

<footer data-src="templates/footer.html" data-type="text/html"></footer>

<script src="components/prism-core.js"></script>
<script src="plugins/autoloader/prism-autoloader.js"></script>
<script src="utopia.js"></script>
<script src="components.js"></script>
<script src="code.js"></script>


</body>
</html>
Loading