Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/proustibat/ion-prism
An Ionic directive to display blocks of code on your Ionic HTML pages, using Prism.js.
https://github.com/proustibat/ion-prism
directive highlighting ionic ionic-apps ionic-cordova ionic-directive ionic-framework ionic-html-pages ionic3 npm-package prism prismjs syntax-highlighter syntax-highlighting
Last synced: 6 days ago
JSON representation
An Ionic directive to display blocks of code on your Ionic HTML pages, using Prism.js.
- Host: GitHub
- URL: https://github.com/proustibat/ion-prism
- Owner: proustibat
- License: agpl-3.0
- Created: 2017-11-16T10:02:47.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-15T12:10:33.000Z (over 4 years ago)
- Last Synced: 2024-09-19T02:53:16.680Z (14 days ago)
- Topics: directive, highlighting, ionic, ionic-apps, ionic-cordova, ionic-directive, ionic-framework, ionic-html-pages, ionic3, npm-package, prism, prismjs, syntax-highlighter, syntax-highlighting
- Language: Shell
- Homepage: https://proustibat.github.io/ion-prism/
- Size: 775 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
ION PRISM DIRECTIVE [](https://github.com/proustibat/ion-prism) 
===================
An Ionic directive to display blocks of code on your Ionic HTML pages, using [Prism.js](http://prismjs.com).
| [](https://www.npmjs.com/package/ion-prism) []() [](https://www.npmjs.com/package/ion-prism) [](https://www.npmjs.com/package/ion-prism) | [](https://github.com/proustibat/ion-prism/commits/master) [](https://github.com/proustibat/ion-prism/commits/master) [](https://sonarcloud.io/component_measures?id=prstbt.ion-prism.directive&metric=open_issues) | [](https://travis-ci.org/proustibat/ion-prism) [](https://sonarcloud.io/dashboard?id=prstbt.ion-prism.directive) [](https://codeclimate.com/github/proustibat/ion-prism) | [](https://greenkeeper.io/)
[](https://david-dm.org/proustibat/stats-text) [](https://david-dm.org/proustibat/stats-text?type=dev) |
| --- | :--- | :---- | :----
-----------------
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):
```javascript
module.exports = {
copyPrism: {
src: ['{{ROOT}}/node_modules/prismjs/themes/**/*'],
dest: '{{WWW}}/assets/prismjs/themes'
}
}
```
Then in your *package.json*, add this:
```json
"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:
```html
```
**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:
```typescript
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:
```html
```
### Example
A full app as example is [available here](https://github.com/proustibat/ion-prism-app-example).
```html
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](https://github.com/proustibat/occurences/issues)
- Source Code: [https://github.com/proustibat/ion-prism](https://github.com/proustibat/occurences)
- Pull Requests: [https://github.com/proustibat/ion-prism/pulls](https://github.com/proustibat/occurences/pulls)
(I use [commitizen](https://github.com/commitizen/cz-cli), 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: [email protected]
License
-------
The project is licensed under the [GNU Affero General Public License v3.0 license](LICENSE)