Grabs remote code files and embeds them into your website.
-
Include
codegrabber
in your HTML (seebuild
directory).<script src="codegrabber.min.js"></script>
-
Define some
pre
tags.<pre data-src="https://rawgit.com/akoenig/codegrabber/master/README.md"></pre>
-
Enjoy :)
Type: String
Default: undefined
The URI to the source file which you want to embed.
Type: String
Default: undefined
There are sometime situations in which you only want to display a particular part of your source files. You can do that by defining the data-lines
attribute, like:
<pre data-src="https://host.tld/your-file.js"
data-lines="1-20"></pre>
Displays only the first 20 lines of your-file.js
.
If you are wondering why there is no syntax highlighting, because hooks :) codegrabber
provides a straightforward hook mechanism with which you can embed your favorite syntax highlighter or, of course, do other crazy things. I built a hook for using the highlight.js syntax highlighter out of the box. Check codegrabber-highlightjs.
But, writing your own hook and registering it is easy:
codegrabber.Hooks.register({
name: 'your-hook',
run : function run (element) {
// Do something special
}
});
You can register as much hooks as you want. All of them will be executed in a sequential order.
Easy, eh? Every hook will be run after
the source file has been loaded into the respective HTML element which will also be passed to the run
function.
If you have written your own hook (e.g. for covering a different syntax highlighter), drop me a line and I will add it to the following list.
- codegrabber-highlightjs - Syntax highlighting with
highlight.js
.
- Feature for removing comments from a source file.
- Interface for integrating hooks (e.g. syntax highlighters).
- Streamlined the namespace.
- Support for fetching remote files.
- Support for extracting a particular range of lines.
Copyright 2014, André König (andre.koenig@posteo.de)