View on GitHub

Angular-snippets

AngularJS directives to display file source code with tabs and syntax highlighter (prism)

Download this project as a .zip file Download this project as a tar.gz file

angular-snippets

Angular directives to display code with.

Use Prism syntax highlighter
Support theme

Example


<snippets path="snippets/demo" files="['index.html', 'app.js', 'missing.css']">
  <snippets-pane snippet="{name: 'run', icon: 'fa-cog'}">
    <iframe src="snippets/demo/index.html"></iframe>
  </snippets-pane>
</snippets>

Getting started

Dependencies

Installation

You can either download the latest version on the github repository or use Bower to install it automatically:

bower install angular-snippets

Bower will also install its dependencies. Load the packages into your HTML page:


<link rel="stylesheet" type="text/css" href="path/to/prism/prism.css">
<script src="path/to/prism/prism.js"></script>
<script src="path/to/angular-snippets.min.js"></script>

Snippets need one theme, you can use one of the official themes or create your own. Load the theme:


<link rel="stylesheet" type="text/css" href="path/to/themes/bootstrap-tabs/style.css">
<script src="path/to/themes/bootstrap-tabs/theme.js"></script>

Utilisation

Dependency

Add into your application definition, the module and the theme dependencies:

angular.module('MyApp', ['Snippets', 'SnippetsThemeBootstrapTabs']);

Usage

This module can either use a file list from the attribute files or download a manifest (default is manifest.json) and use its files property.
Both may depends on a path attribute.

File list


<snippets path="snippets/" files="['index.html', 'app.js']"></snippets>

Manifest


<snippets path="snippets/"></snippets>

width manifest.json:


{
  "files": [
    "index.html",
    "app.js"
  ]
}

API

Provider

snippetsProvider

snippetsProvider allows to configure the module by extending default options and providing content to append. Configure module
function (option:ModuleOptions) Content handlers ModuleOptions (object) Name of the manifest JSON file (may include path)
The manifest have to include a main key files as an array of string. Object used to extend snippets directive.
Basically, used to define the directive template property by the themes. Function used to highlight the code.
function (element: angular.element)
Return: None Cast function to convert file extension to file type.
function (extension: String)
Return: String Content handlers (object) Append content before main transclusion.
function (template: String)
Return None Append content after main transclusion.
function (template: String)
Return None

Directives

snippets

Type: element
Basically, it use an array of filenames, download these files using $templateRequest and highlight it using Prism. path to prepend on manifest or file path,
e.g. path="snippets" Array of string. File names list to display,
e.g. files="['index.html', 'script.js']"

content-before-disabled

Type: attribute
Disable for the current instance the global before content inclusion.

content-after-disabled

Type: attribute
Disable for the current instance the global after content inclusion.

Themes

Several themes are available, but you can create yours using its scope properties.

snippets scope

Set to true when all files have been processed.
Stay to false if neither attribute files nor manifest file are available. Path attribute. Array of FileData FileData (object) File name File type (depends on extension) File content Set to true if file load has failed (404)

Legal

The source for angular-snippets is released under the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.