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):
moduleexports = copyPrism: src: '{{ROOT}}/node_modules/prismjs/themes/**/*' dest: '{{WWW}}/assets/prismjs/themes'
Then in your package.json, add this:
"config":
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:
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:
;;;;; ;;;
Usage
Ion Prism directive works only on textarea element and needs a value for the language:
Example
A full app as example is available here.
Example with 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; }; Example with html
Result:
Contribute
- Issue Tracker: https://github.com/proustibat/ion-prism/issues
- Source Code: https://github.com/proustibat/ion-prism
- Pull Requests: https://github.com/proustibat/ion-prism/pulls
(I use commitizen, so if you wanna contribute to the project and create a pull request, please use it by running git cz
instead of git commit
.)
Support
If you are having issues, please let me know: proustibat@gmail.com
License
The project is licensed under the GNU Affero General Public License v3.0 license