Ion-prism NPM | npm.io

ION PRISM DIRECTIVE

An Ionic directive to display blocks of code on your Ionic HTML pages, using Prism.js.

Installation

npm install --save ion-prism

Import Prism CSS in your Ionic Project

Ionic allows to extend or override ionic app-scripts in order. So add a task to the ionic_copy config as follows.

First, at the root of your project folder, add a folder config (if it doesn't exist) then create a copy.config.js in it with this content (or just add the task it if the file already exists):

module.exports = {
    copyPrism: {
        src: ['{{ROOT}}/node_modules/prismjs/themes/**/*'],
        dest: '{{WWW}}/assets/prismjs/themes'
    }
}

Then in your package.json, add this:

  "config": {
    "ionic_copy": "./config/copy.config.js"
  }

CSS from the Prism.js library will be copy to your output folder.

Finally, you just need to add css file in the index.html of the Ionic app:

<link href="assets/prismjs/themes/prism.css" rel="stylesheet">

Note that you may want import one of the other css files of Prismjs to change the theme as you want. (prism-coy.css, prism-dark.css, prism-funky.css, prism-okaidia.css, prism-solarizedlight.css, prism-tomorrow.css, prism-twilight.css)

Declare directive in your app

In app.module.ts, import IonPrismDirective and add it to the declarations of @NgModule as follows:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { IonPrismDirective } from 'ion-prism';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    IonPrismDirective
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Usage

Ion Prism directive works only on textarea element and needs a value for the language:

<textarea ion-prism="<language_type_here>">
    <your_code_to_display_here_>
</textarea>

Example

A full app as example is available here.

  <h1>Example with javascript</h1>
  <textarea ion-prism="javascript">
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
      return c > 3 && r && Object.defineProperty(target, key, r), r;
  };
  </textarea>

  <h1>Example with html</h1>
  <textarea ion-prism="html">
    <svg width="200" height="200" style="border:1px solid black;">
        <circle cx="20" cy="20" r="20" fill="green" />
        <circle cx="70" cy="70" r="20" fill="purple" />
        <rect x="110" y="110" height="30" width="30" fill="blue" />
        <rect x="160" y="160" height="30" width="30" fill="red" />
    </svg>
  </textarea>

Result: