{"id":16431308,"url":"https://github.com/hjalmers/angular-exemplify","last_synced_at":"2025-03-16T17:35:33.834Z","repository":{"id":15090916,"uuid":"77543691","full_name":"hjalmers/angular-exemplify","owner":"hjalmers","description":"A simple angular 2+ component for adding code examples and snippet based on actual code and markup!","archived":false,"fork":false,"pushed_at":"2024-05-22T22:14:17.000Z","size":7148,"stargazers_count":4,"open_issues_count":48,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-22T23:27:05.806Z","etag":null,"topics":["angular","code-examples","example","exemplify","markup","prism"],"latest_commit_sha":null,"homepage":"https://hjalmers.github.io/angular-exemplify/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hjalmers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-28T15:48:01.000Z","updated_at":"2024-05-29T22:39:53.938Z","dependencies_parsed_at":"2024-04-17T00:29:45.021Z","dependency_job_id":"bfcfec21-364f-497a-9092-0a128c9cac8a","html_url":"https://github.com/hjalmers/angular-exemplify","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-exemplify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-exemplify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-exemplify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-exemplify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hjalmers","download_url":"https://codeload.github.com/hjalmers/angular-exemplify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243823340,"owners_count":20353652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","code-examples","example","exemplify","markup","prism"],"created_at":"2024-10-11T08:29:44.864Z","updated_at":"2025-03-16T17:35:33.446Z","avatar_url":"https://github.com/hjalmers.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Exemplify\n[![Build Status](https://travis-ci.com/hjalmers/angular-exemplify.svg?branch=master)](https://travis-ci.com/hjalmers/angular-exemplify)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)\n\nA simple angular component for adding code examples based on actual code and markup! Just add \u003ccode\u003e\u0026lt;exemplify\u0026gt;\u0026lt;/exemplify\u0026gt;\u003c/code\u003e together with \u003ccode\u003e[selector]=\u0026quot;'**html selector**'\u0026quot;\u003c/code\u003e and/or \u003ccode\u003e[sources]=\u0026quot;sourceList\u0026quot;\u003c/code\u003e to your code and you're done:D\n\n### View [example](https://hjalmers.github.io/angular-exemplify/)\n\n## Dependencies\n* [Prism](http://prismjs.com/) - for highlighting\n* [Bootstrap](https://getbootstrap.com/) - for basic styling (optional)\n* [Raw-loader](https://github.com/webpack-contrib/raw-loader) - a loader for webpack that allows importing files as a String (optional)\n\nPlease note that you don't have to use bootstrap and/or raw-loader with angular exemplify although it's recommended.\n\n## Installation and usage\n\nInstall with:\n```\nnpm install angular-exemplify --save\n```\n\n**If you want to use together with bootstrap 4**\n\nRun:\n```\nnpm install bootstrap --save\n```\n\n### Usage in angular-cli project\nPlease 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.\n\n**Include scripts and styles in build**\n\nIf 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:\n\n```js\n\"styles\": [\n  \"../node_modules/bootstrap/dist/css/bootstrap.css\",\n  \"../node_modules/angular-exemplify/css/prism-exemplify.css\",\n  \"../node_modules/angular-exemplify/css/exemplify.css\", // \u003c-- only add this line if you're not using bootstrap\n  \"styles.css\"\n],\n\"scripts\": [\n  \"../node_modules/prismjs/prism.js\"\n],\n```\n\nIf you're using sass, you could also import the corresponding sass files like this instead of adding the css files:\n```scss\n@import \"~angular-exemplify/scss/prism-exemplify\";\n@import \"~angular-exemplify/scss/exemplify\"; // \u003c-- only add this line if you're not using bootstrap\n@import \"~bootstrap/scss/bootstrap\";\n```\n\n\n**Import ExemplifyModule**\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { AppComponent } from './app.component';\nimport { ExemplifyModule } from \"angular-exemplify\";\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    ExemplifyModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Basic usage\nAdd `\u003cexemplify [selector]=\"'.btn.btn-primary'\"\u003e\u003c/exemplify\u003e` below your element like this:\n```\n\u003cbutton class=\"btn btn-primary\" (click)=\"doSomething()\"\u003eAction\u003c/button\u003e\n\u003cexemplify [selector]=\"'.btn.btn-primary'\"\u003e\u003c/exemplify\u003e\n```\n\nWhere `selector` could be a any html selector.\n\nView [demo](https://hjalmers.github.io/angular-exemplify/) for live preview and more examples.\n\n### Options\n\n| Attribute       | Type      | Usage/description                                                                                                                                                                  | Default           |\n|:----------------|:----------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------|\n| show            | boolean   | should the example be shown or hidden by default                                                                                                                                   | false             |\n| sources         | array     | an array of objects specifying sources                                                                                                                                             |                   |\n| 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. |                   |\n| texts           | object    | override default texts by passing an object containing one or more of the following properties: `sourceNotFound`, `markup`, `show`, `hide`, `copy`, `copySuccess`, `copyError`     |                   |\n\n\n### Using external sources\n\nTo 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.\n\n```json\nsources = [{\n    \"name\":\"app.module.ts\",\n    \"src\":\"https://raw.githubusercontent.com/hjalmers/angular-markup-example/master/src/app/app.module.ts\"\n  },{\n    \"name\":\"app.component.ts\",\n    \"src\":\"https://raw.githubusercontent.com/hjalmers/angular-markup-example/master/src/app/app.component.ts\"\n  },{\n    \"name\":\"app.component.css\",\n    \"src\":\"https://raw.githubusercontent.com/hjalmers/angular-markup-example/master/src/app/app.component.css\",\n    \"lang\":\"css\"\n  }]\n```\n\n\n### If you want to use raw-loader to load project files\n\nInstall with:\n```\nnpm install raw-loader --save-dev`\n```\n\nThen you need to add the following typings to your `typings.d.ts` file.\n\n```js\ndeclare module '!raw-loader!*' {\n    const contents: string;\n    export = contents;\n}\n```\n\nTo avoid errors related to `require` when using raw-loader like this:\n\n```\nsorces = [{\n    name: 'app.component.ts',\n    src: require('!raw-loader!app/app.component.ts'),\n    lang: 'markup'\n  }]\n```\n\nInstall types for node:\n```\nnpm install @types/node --save-dev\n```\n\nAnd add `node` to your types in tsconfig.app.json`\n\n```\n{\n  \"compilerOptions\": {\n    ...\n    \"types\": [\n      \"node\" \u003c-- Add this\n    ]\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjalmers%2Fangular-exemplify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhjalmers%2Fangular-exemplify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjalmers%2Fangular-exemplify/lists"}