https://github.com/hjalmers/angular-exemplify
A simple angular 2+ component for adding code examples and snippet based on actual code and markup!
https://github.com/hjalmers/angular-exemplify
angular code-examples example exemplify markup prism
Last synced: 3 months ago
JSON representation
A simple angular 2+ component for adding code examples and snippet based on actual code and markup!
- Host: GitHub
- URL: https://github.com/hjalmers/angular-exemplify
- Owner: hjalmers
- License: apache-2.0
- Created: 2016-12-28T15:48:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T22:14:17.000Z (about 1 year ago)
- Last Synced: 2024-05-22T23:27:05.806Z (about 1 year ago)
- Topics: angular, code-examples, example, exemplify, markup, prism
- Language: TypeScript
- Homepage: https://hjalmers.github.io/angular-exemplify/
- Size: 6.82 MB
- Stars: 4
- Watchers: 2
- Forks: 4
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Angular Exemplify
[](https://travis-ci.com/hjalmers/angular-exemplify)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
[](https://renovatebot.com/)
A simple angular component for adding code examples based on actual code and markup! Just add <exemplify></exemplify> together with [selector]="'**html selector**'" and/or [sources]="sourceList" to your code and you're done:D
### View [example](https://hjalmers.github.io/angular-exemplify/)
## Dependencies
* [Prism](http://prismjs.com/) - for highlighting
* [Bootstrap](https://getbootstrap.com/) - for basic styling (optional)
* [Raw-loader](https://github.com/webpack-contrib/raw-loader) - a loader for webpack that allows importing files as a String (optional)
Please note that you don't have to use bootstrap and/or raw-loader with angular exemplify although it's recommended.
## Installation and usage
Install with:
```
npm install angular-exemplify --save
```
**If you want to use together with bootstrap 4**
Run:
```
npm install bootstrap --save
```
### Usage in angular-cli project
Please note the instructions below are for projects based on angular-cli, you might need to set up things differently if you're using something else.
**Include scripts and styles in build**
If you want to use angular exemplify together with prism, make sure to add the prism script and the prism-exemplify.css or one of the prism theme css files to your `.angular-cli.json` config, bootstrap.css is optional but if you're not using bootstrap you should include exemplify.css to get the basic styling at least:
```js
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/angular-exemplify/css/prism-exemplify.css",
"../node_modules/angular-exemplify/css/exemplify.css", // <-- only add this line if you're not using bootstrap
"styles.css"
],
"scripts": [
"../node_modules/prismjs/prism.js"
],
```
If you're using sass, you could also import the corresponding sass files like this instead of adding the css files:
```scss
@import "~angular-exemplify/scss/prism-exemplify";
@import "~angular-exemplify/scss/exemplify"; // <-- only add this line if you're not using bootstrap
@import "~bootstrap/scss/bootstrap";
```
**Import ExemplifyModule**
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ExemplifyModule } from "angular-exemplify";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ExemplifyModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Basic usage
Add `` below your element like this:
```
Action
```
Where `selector` could be a any html selector.
View [demo](https://hjalmers.github.io/angular-exemplify/) for live preview and more examples.
### Options
| Attribute | Type | Usage/description | Default |
|:----------------|:----------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------|
| show | boolean | should the example be shown or hidden by default | false |
| sources | array | an array of objects specifying sources | |
| escapeStrings | array | an array with strings that should be escaped (necessary for attribute strings that are written using camel case i.e. inputs, template variables etc.), see issue #1 for more info. | |
| texts | object | override default texts by passing an object containing one or more of the following properties: `sourceNotFound`, `markup`, `show`, `hide`, `copy`, `copySuccess`, `copyError` | |
### Using external sources
To keep the examples in sync with your code you should reference the source files. Here's an example based on a app published and deployed to github pages.
```json
sources = [{
"name":"app.module.ts",
"src":"https://raw.githubusercontent.com/hjalmers/angular-markup-example/master/src/app/app.module.ts"
},{
"name":"app.component.ts",
"src":"https://raw.githubusercontent.com/hjalmers/angular-markup-example/master/src/app/app.component.ts"
},{
"name":"app.component.css",
"src":"https://raw.githubusercontent.com/hjalmers/angular-markup-example/master/src/app/app.component.css",
"lang":"css"
}]
```
### If you want to use raw-loader to load project files
Install with:
```
npm install raw-loader --save-dev`
```
Then you need to add the following typings to your `typings.d.ts` file.
```js
declare module '!raw-loader!*' {
const contents: string;
export = contents;
}
```
To avoid errors related to `require` when using raw-loader like this:
```
sorces = [{
name: 'app.component.ts',
src: require('!raw-loader!app/app.component.ts'),
lang: 'markup'
}]
```
Install types for node:
```
npm install @types/node --save-dev
```
And add `node` to your types in tsconfig.app.json`
```
{
"compilerOptions": {
...
"types": [
"node" <-- Add this
]
}
}
```