valor-software/ng2-prism

Name: ng2-prism

Owner: Valor Software

Description: An Angular2 codeblock highlighting component using Prismjs.

Forked from: tpadjen/ng2-prism

Created: 2016-12-13 21:01:19.0

Updated: 2017-11-03 01:10:38.0

Pushed: 2017-03-27 09:45:55.0

Homepage: http://braceyourself.io/ng2-prism

Size: 19295

Language: TypeScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

ng2-prism

An Angular2 codeblock highlighting component using Prismjs.

Installation

jspm

pm i npm:ng2-prism

npm

m i ng2-prism --save

Setup

jspm and systemjs

No additional setup necessary.

systemjs only (installed with npm)

Systemjs needs to know the path to ng2-prism and prismjs, along with the typical angular dependencies (including http). Use map, and make sure defaultJSExtensions is set to true. Here is an example config, for use with the angular2 quickstart:

ipt>
stem.config({
defaultJSExtensions: true,
packages: {        
  app: {
    format: 'register'
  }
},
map: {
  "angular2": "node_modules/angular2",
  "rxjs": "node_modules/rxjs",
  "ng2-prism": "node_modules/ng2-prism",
  "prismjs": "node_modules/prismjs"
}
;
stem.import('app/main')
    .then(null, console.error.bind(console));
ript>

Usage

Import the component:

rt {Codeblock} from 'ng2-prism/codeblock';

Import the language definition for your codeblock:

rt {Ruby} from 'ng2-prism/languages';

Include the component and language directive in the directives array:

ponent({
lector: 'my-component',
 ...
rectives: [Codeblock, Ruby]

Add a codeblock to the template with the language directive attached:

eblock ruby>
f my_new_method
p "So Impressive!"
d
deblock>

Angular2 Bindings

Use angular bindings like normal for variable output.

ut type="text" [(ngModel)]="name">

{name}} will be replaced by whatever is typed in the input
eblock javascript>
 (name === '{{name}}') {
console.log("Hello, " + name);

deblock>

If you want to display the binding without processing place a pre tag around any of the braces.

ut type="text" [(ngModel)]="name">

{name}} will not be replaced
eblock javascript>
re>{</pre>{name}}
deblock>

Dynamic Loading

Use the src directive to set a file to download as the source code for a codeblock. The language of the codeblock will be determined from the file extension, unless a language is specified.

First, import the Source directive:

rt {Codeblock, Source} from 'ng2-prism/codeblock';

Then add it to the list of directives:

ponent({
lector: 'my-component',
 ...
rectives: [Codeblock, Source]

Then use the src attribute on the codeblock in your template:

 automatically loads as javascript -->
eblock src="path/to/main.js"></codeblock>

 tries to highlight the downloaded file as typescript -->
eblock typescript src="path/to/main.js"></codeblock>

Notes on Dynamic loading:

• The codeblock will automatically update on changes to src.
• Updates to src are throttled at 300ms to prevent unnecessary http requests, you can change the time by setting debounceTime on the codeblock, or by providing SourceDebounceTime - more details here
• The src attribute must have a file extension.
• Everything inside the dynamic codeblock will be replaced by the contents of the source file.
• The source contents are treated as text only, not DOM elements. Components, directives, and bindings will not be processed by angular2.
• The source directive relies on the angular2 Http module. Make sure you have included the HTTP_PROVIDERS when bootstrapping your app.

Themes

Add a theme attribute to the codeblock element:

eblock javascript theme="dark">
 dark themed
deblock>

eblock javascript [theme]="selectedTheme">
 uses whichever theme is currently stored in the selectedTheme variable
deblock>

Your theme options are:

• standard
• coy
• dark
• funky
• okaidia
• solarizedlight
• tomorrow
• twilight

The list of themes is available at runtime with CodeblockComponent.THEMES.

HTML

To embed HTML use the language markup.

If you use standard HTML tags, and carefully close each one, you can write it as normal inside a codeblock:

eblock markup>
l class="favorites">
<li>These are</li>
<li>a few of</li>
<li>my favorite</li>
<li>things.</li>
ul>
deblock>

ou want to write a fragment of `HTML` with some unmatched tags the angular interpreter is going to fail to load your template. You must change any opening or closing tag angle brackets, <, to the html entity version:

> &lt;`

<html>

<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
...

mically loaded files do not have this limitation.

ular2 Components`, such as a `codeblock` or an `ngIf`, will be processed by angular before highlighting. If you want to show their preprocessed version in the highlighted section instead of their results they should be escaped:

A

B

<section ngIf=“true” >A</section> <section ngIf=“false”>B</section>

ou want to show bindings without processing use the `bind` method on a local variable assigned to the `codeblock`:

{{ cb.bind('expression') }}

// result {{expression}}

Language

may optionally specify a `language` attribute instead of using a directive:

def my_new_method

p "So Impressive!"

end

attribute makes the language easy to change dynamically:

import {Component} from 'angular2/core'; < /codeblock>

blocks without a valid loaded `language` attribute or directive get everything except syntax highlighting:

Just normal text but themed with line numbers

Eso no es un lenguaje de verdad!

ou choose to use the `language` attribute the language must still be imported, but you do not have to list it in the directives array because the template does not need to know about it.

 languages are automatically loaded when **any** language is imported from ng2-prism/languages*. To import only the language(s) you want:

// if you want the directive: import {Ruby} from 'ng2-prism/languages/ruby';

// If you just want the language: import 'ng2-prism/languages/ruby';

Line Numbers

prism automatically adds line numbers to codeblocks. To disable them bind a `lineNumbers` attribute to `false`:

                or

Shell

the `shell` attribute to display a shell prompt. Pass in the type of shell, either `bash` or `powershell`.

ls

dir

`language` attribute is ignored on `shell` `codeblocks`.

default `theme` for shells is `okaidia`.

 Prompt

ge the `prompt` to whatever you want:

cd ..

cd ..

cd .. [user@host] $ cd ..

 Output

ls can have certain lines treated as console output, so they don't have a prompt. Use the `outputLines` attribute. It accepts a comma-separated list of lines or line ranges:

cd ../.. This is output mkdir hello so is this rm -rf hello more output more output more output more output

$ cd ../.. This is output $ mkdir hello so is this $ rm -rf hello more output more output more output more output