ng-prism
Version:
An Angular2 codeblock highlighting component using Prismjs.
257 lines (256 loc) • 6.82 kB
TypeScript
import { AfterViewChecked, AfterContentChecked, ElementRef } from '@angular/core';
import { Response } from '@angular/http';
export declare class CodeblockComponent implements AfterViewChecked, AfterContentChecked {
/**
* Map of file extensions to highlighting languages
*/
static EXTENSION_MAP: any;
/**
* Possible shell types
*/
static SHELL_TYPES: string[];
/**
* A list of the valid codeblock themes.
*
* Example:
* ```
* <select name="select" [(ngModel)]="selectedTheme">
* <option *ngFor="#theme of CodeblockComponent.THEMES"
* value="{{theme}}">{{theme}}</option>
* </select>
* ```
*/
static THEMES: string[];
DEFAULT_THEME: string;
DEFAULT_SHELL_THEME: string;
/**
* Display line numbers for the codeblock. The numbers start at 1 and are
* not selected when selecting the main code text.
*
* Example:
* ```
* <codeblock [lineNumbers]="true" markup>
* <h1>Hello</h1>
* <h1>Hi</h1>
* <h1>Aloha</h1>
* </codeblock>
* ```
*
* Result:
* ```
* 1 <h1>Hello</h1>
* 2 <h1>Hi</h1>
* 3 <h1>Aloha</h1>
* ```
*
* @param {boolean} value - whether or not to show line numbers
*/
lineNumbers: boolean;
/**
* Set the language used to highlight the code within the codeblock.
* Consider using a language directive instead if the language is not
* going to change dynamically.
*
* Example:
* <codeblock language="markup">
* <h1>This is HTML</h1>
* </codeblock>
*
* @param lang
*/
language: string;
/**
* The theme for styling the codeblock. All prismjs themes are available.
*
* @param {string} theme - A prismjs theme. Defaults to 'standard'.
*/
theme: string;
/**
* The prompt to display in a shell codeblock. Default is $.
*
* Example:
* ```
* <codeblock shell="bash" prompt="#">
* cd ..
* </codeblock>
* ```
* Result:
* ```
* # cd ..
* ```
*/
prompt: string;
/**
* Comma separated list of lines or series of lines to treat as output
* in a shell codeblock, meaning they do not have a prompt.
*
* Example:
* ```
* <codeblock shell="bash" outputLines="2, 4-6, 8">
* Line 1
* Line 2
* Line 3
* Line 4
* Line 5
* Line 6
* Line 7
* Line 8
* </codeblock>
* Result:
* ```
* $ Line 1
* Line 2
* $ Line 3
* Line 4
* Line 5
* Line 6
* $ Line 7
* Line 8
* ```
*/
outputLines: string;
/**
* Turn this codeblock into a shell display with a prompt.
*
* Example:
* ```
* <codeblock shell="bash">
* cd ..
* mkdir project
* </codeblock>
* ```
* Result:
* ```
* $ cd ..
* $ mkdir project
* ```
*
* @param {string} shellType - One of CodeblockComponent.SHELL_TYPES
*/
shell: string;
/*** ViewChildren ***/
/**
* The container for the original content of the codeblock. Hidden from view.
*/
contentEl: any;
/**
* Component that shows the highlighted code.
*/
codeRenderer: any;
/**
* The code has been loaded from a remote file. The file must have an
* extension to be loaded. Error/warning messages are displayed within the
* codeblock. The language is determined from the file extension, unless a
* language is provided. Import and use the Source directive to apply it.
*
* Null means no source has been loaded.
*
* Examples:
* ```
* <codeblock src="index.html"></codeblock>
* <codeblock
* src="https://raw.githubusercontent.com/tpadjen/ng2-prism/master/codeblock.js"
* <codeblock
* src="http://meyerweb.com/eric/tools/css/reset/reset.css"></codeblock>
* ```
*/
private _sourced;
private _code;
private _language;
private _showingMessage;
private _languageSet;
private _lineNumbers;
private _theme;
private _changed;
private _shellType;
private _elementRef;
constructor(_elementRef: ElementRef);
/**
* Update code when content changes
*/
ngAfterContentChecked(): any;
/**
* Render code when any input changes
*/
ngAfterViewChecked(): any;
/**
* The current content of the codeblock.
*
* Example:
* ```
* <codeblock javascript>
* // Inside the codeblock
* </codeblock>
* ```
* Result:
* ```
* // Inside the codeblock
* ```
*
* @return {string} - innerHTML of this codeblock's nativeElement
*/
readonly content: string;
/**
* The code to display in the codeblock. Automatically set to this.content
* unless a src attribute is present.
*/
code: string;
/**
* The source has been changed
*/
sourceChanged(url: string): void;
/**
* Given the downloaded source, set the language and code to match it.
*
* @param {Response} res
*/
sourceReceived(res: Response): void;
/**
* An error occured while downloading from the src url
*
* @param {Error} error
*/
sourceError(error: Error): void;
/**
* Is this displayed as a shell?
*/
isShell(): boolean;
/**
* @return {boolean} - whether or not lineNumbers should be displayed
*/
shouldDisplayLineNumbers(): boolean;
/*** Truncation ***/
/*** Methods ***/
/**
* Display the text inside the codeblock instead of code. Used for errors
* and warnings during file loading. The language of the codeblock will
* be set to undefined when displaying a message.
*
* @param {string} text - The message to display.
*/
message(text: string): void;
/**
* Returns a double curly-braced version of the input string.
* Use this inside a template to display a binding.
*
* Example:
* ```
* <codeblock markup #cb><span>{{cb.bind('name')}}</span></codeblock>
* ```
* Result:
* ```
* <span>{{name}}</span>
* ```
*
* @param {string} text - the text to wrap in curly braces
*/
bind(text: string): string;
/************ Private **************/
/**
* Use html < for leading < tags in multiline typescript strings
*
* @param {string} text - the code
* @return {string} - the code with < replaced by < inside ``s
*/
private _replaceTagsInMultiline(text);
}