https://github.com/wbhob/magique

A utility for wrapping strings in tags without the headache.
https://github.com/wbhob/magique

dom html javascript magique tags typescript

Last synced: 8 days ago
JSON representation

A utility for wrapping strings in tags without the headache.

• Host: GitHub
• URL: https://github.com/wbhob/magique
• Owner: wbhob
• License: mit
• Created: 2017-12-28T16:56:31.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-28T17:26:38.000Z (about 7 years ago)
• Last Synced: 2024-04-24T19:11:57.693Z (10 months ago)
• Topics: dom, html, javascript, magique, tags, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/magique
• Size: 26.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Magique

Magique is a dead-simple, highly-readable way to write HTML in JavaScript. It's particularly designed for templating, so if you find yourself writing a lot of wrapping tags (like `` and ``) around strings, you'll find this package useful.


## Example

```ts

import { b, i } from 'magique';

b('hello') // yields hello

i('hello') // yields hello

```

## Installation

```sh

$ npm install --save magique

```

## Usage

### TypeScript/ES6

```ts

import { bold } from 'magique';

bold('hello');

/* OR */

import * as magique from 'magique';

magique.bold('hello');

```

### ES5

```js

var magique = require('magique');

magique.bold('hello');

/* OR */

var bold = require('magique').bold;

bold('hello');

```

## Supported Tags and Aliases

| Tag                                | Aliases          | Returns                                  | Usage                                          |

| ---------------------------------- | ---------------- | ---------------------------------------- | ---------------------------------------------- |

| `b`                                | `bold`, `strong` | `str`                   | `b(str)`                                       |

| `i`                                | `italic`, `em`   | `str`                           | `i(str)`                                       |

| `a`                                | `link`           | `str` or `str` | `a(str)` OR `a(str, href)`                     |

| `br`                               | `N/A`            | `
`                                 | `br()`                                         |

| `hX`                               | `header`         | `str`                           | `h(level)(str)` where level is between 1 and 6 |

| `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | `N/A`            | `
str
`                           | `h1(str)`                                      |