# xhtml2slim

> library for convert html2slim

Latest version **5.0.4** (published 2022-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install xhtml2slim
pnpm add xhtml2slim
yarn add xhtml2slim
bun add xhtml2slim
```

Provides the command `xhtml2slim`.

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.4 |
| Published | 2022-12-30 |
| First published | 2022-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 127.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Robby Dhillon |
| Maintainers | djrobby |
| Keywords | html to slim, html2slim, convert html to slim |

## Links

- npm: https://www.npmjs.com/package/xhtml2slim
- Repository: https://github.com/djrobby/xhtml2slim
- Homepage: https://github.com/djrobby/xhtml2slim#readme
- Issues: https://github.com/djrobby/xhtml2slim/issues
- npm.io page: https://npm.io/package/xhtml2slim

## Dependencies (5)

- [yargs](https://npm.io/package/yargs.md) ^17.6.2
- [hyntax](https://npm.io/package/hyntax.md) ^1.1.9
- [get-stdin](https://npm.io/package/get-stdin.md) ^9.0.0
- [html-entities](https://npm.io/package/html-entities.md) ^2.3.3
- [@vue/compiler-dom](https://npm.io/package/@vue/compiler-dom.md) ^3.2.45

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 5.0.4 (latest) — 2022-12-30
- 5.0.3 — 2022-12-28
- 5.0.2 — 2022-12-28
- 5.0.0 — 2022-12-28

## README

# Credit

This package is a derivative/fork of [xhtml2pug](https://www.npmjs.com/package/xhtml2pug), created by [dimensi](https://github.com/dimensi). I simply modified it to generate compliant Slim code (which is very similar to Pug) from HTML that heavily utilizes [TailwindCSS](https://tailwindcss.com/) classes. Traditional converters have not been updated in some time to be able to handle a lot of [TailwindCSS](https://tailwindcss.com/) class names as they contain various special charcters such as `[:, /]` to name a few. This tool fixes that by moving away from the dot notated CSS `h1#myTitle.text-neutral-800.dark:text-neutral-100 foo` classes (which tend to throw off the [Slim](https://github.com/slim-template/slim) language processor) to inline CSS classes `h1#myTitle[class="text-neutral-800 dark:text-neutral-100"] foo`. I'm a heavy user of both [Ruby Slim](https://github.com/slim-template/slim) rendering engine and [TailwindCSS](https://tailwindcss.com/) and tool allows me to move at the speed of light when it comes to converting HTML code to Slim.

# xhtml2slim

Converts **HTML** and **Vue** like syntax to **Slim** or **Pug** templating language.  
Requires Node.js version `14` or higher.

Using the following command (_take note of the **`-w square`** attribute wrapper flag_):

```
xhtml2slim -w square < example.html
```

Turns this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World!</title>
  </head>
  <body class="bg-neutral-100 dark:bg-neutral-800 group/home:body">
    <div id="content" class="text-neutral-800 dark:text-neutral-100">
      <h1 id="myTitle" class="title">Hello World!</h1>
    </div>
  </body>
</html>
```

Into this:

```slim
doctype html
html[lang='en']
  head
    title Hello World!
   body[class="bg-neutral-100 dark:bg-neutral-800 group/home:body"]
    #content[class="text-neutral-800 dark:text-neutral-100"]
      h1#myTitle.title Hello World!
```

## Install

Get it on [npm](https://www.npmjs.com/package/xhtml2slim):

```bash
npm install -g xhtml2slim
```

## Usage

### CLI

Accept input from a file or stdin and write to stdout:

```bash
# choose a file
xhtml2slim -w square < example.html

# use pipe
echo '<h1 id="myTitle" class="text-neutral-800 dark:text-neutral-100">foo</h1>' | xhtml2slim -w square -f
# yields
h1#myTitle[class="text-neutral-800 dark:text-neutral-100"] foo
```

Write output to a file:

```bash
xhtml2slim -w square < example.html > example.slim
```

See `xhtml2slim --help` for more information. The `-w` aka `attrWrapper` is the key differentiator between [xhtml2pug](https://www.npmjs.com/package/xhtml2pug) and this package. It accepts `curly`, `round`, and `square` attribute wrappers to be able to wrap your tags with the appropriate style of brackets. This makes it useful outside of the scope of my personal use case.

### Programmatically

```js
import { convert } from "xhtml2slim";

const html = '<header><h1 class="title">Hello World!</h1></header>';
const slim = convert(html, { symbol: "\t" });
```

### Cli Options

```bash
  -b, --bodyLess      Don't wrap into html > body      [boolean] [default: true]
  -t, --tabs          Use tabs as indent              [boolean] [default: false]
  -s, --spaces        Number of spaces for indent          [number] [default: 2]
  -a, --attrComma     Commas in attributes            [boolean] [default: false]
  -e, --encode        Encode html characters           [boolean] [default: true]
  -q, --doubleQuotes  Use double quotes for attributes [boolean] [default: true]
  -i, --inlineCSS     Place all classes in class attribute
                                                       [boolean] [default: true]
  -c, --classesAtEnd  Place all classes after attributes
                                                      [boolean] [default: false]
  -w, --attrWrapper   Wrap attributes in round brackets
               [string] [choices: "curly", "round", "square"] [default: "round"]
  -p, --parser        html for any standard html, vue for any vue-like html
                             [string] [choices: "html", "vue"] [default: "html"]
```

### Api Options

```ts
export interface PublicOptions {
  /** Don't wrap into html > body */
  bodyLess: boolean;
  /** Commas in attributes */
  attrComma: boolean;
  /**  Encode html characters */
  encode: boolean;
  /** Use double quotes for attributes */
  doubleQuotes: boolean;
  /** Place all classes in class attribute */
  inlineCSS: boolean;
  /** Symbol for indents, can be anything */
  symbol: string;
  /** Wrapper for attributes: curly{}, default:round(), square[] */
  attrWrapper: "curly" | "round" | "square";
  /** Html for any standard html, vue for any vue-like html */
  parser: "html" | "vue";
  /** Place all classes after attributes */
  classesAtEnd: boolean;
}
```

---
_Source: https://npm.io/package/xhtml2slim · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._