https://github.com/anjmao/ng-snippets-loader

Webpack ng-snippets-loader
https://github.com/anjmao/ng-snippets-loader

angular highlight loader snippets webpack

Last synced: 12 days ago
JSON representation

Webpack ng-snippets-loader

• Host: GitHub
• URL: https://github.com/anjmao/ng-snippets-loader
• Owner: anjmao
• License: mit
• Created: 2017-11-01T11:53:07.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-23T11:58:23.000Z (almost 7 years ago)
• Last Synced: 2023-12-24T10:06:21.113Z (11 months ago)
• Topics: angular, highlight, loader, snippets, webpack
• Language: JavaScript
• Homepage: https://anjmao.github.io/ng-snippets-loader/
• Size: 4.54 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/ng-snippets-loader.svg)](https://badge.fury.io/js/ng-snippets-loader)

# ng-snippets-loader

## Demo

https://anjmao.github.io/ng-snippets-loader/

## What problem does this laoder solves

Lets say you are creating some component demo page with examples and you want to add snippets with highlighted code and you want to keep whem in sync with your component html markup and api. You can use markdown or write encoded html by hand, but if you are lazy keep reading.

## Install

using npm

```

npm install ng-snippets-loader --dev

```

using yarn

```

yarn add ng-snippets-loader --dev

```

## How it works

Probably most common case is that you want to show some html component markup with attributes like this

```html

```

Snippet rule is similar to github markdown but instead of using ` symbol you use -

```

---,

[Code snippet here>

---

```

where `` is language `html` or `js` and `` is boolean property, if it is true you code snippet will be executed bellow.

Final snippet will look like this

```

---html,true

---

```

## Webpack configuration

You just need to register ng-snippets-loader for .ts|.js and .html files

```js

...

module: {

        rules: [

            {

                test: /\.ts$/,

                loader: ['awesome-typescript-loader', 'angular2-template-loader', 'ng-snippets-loader'],

                exclude: [/node_modules\/(?!(ng2-.+))/],

            },

            {

                test: /\.(html)$/,

                loader: ['raw-loader', 'ng-snippets-loader']

            }

        ]

    },

```

## Clone and run

You can clone this repo and run example angular application

```

git clone [email protected]:anjmao/ng-snippets-loader.git

yarn

yarn start

```