code-tag ![npm version][link-npm] [![(size)][badge-gzip]](#no-link)

[badge-gzip]: https://img.shields.io/bundlephobia/minzip/code-tag.svg?label=gzipped
[link-npm]: https://www.npmjs.com/package/code-tag

> noop functions to help formatters and syntax highlighters recognize embedded code

When embedding other languages in JavaScript, you can mark those strings with a tag function to help JavaScript tools recognize the string as code:

``js
document.body.innerHTML = html

This is inline HTML

;
`

You can find such tag functions in:

- code-tag: this package, it returns the string as is
- escape-goat: it escapes the any replaced value in the string
- lit-html: it helps write Web Components
- Apollo: it parses GraphQL strings
- Emotion: it defines CSS-in-JS
- etc…

Here are some tools that support them natively:

- Prettier: it formats the strings as real non-JavaScript code
- GitHub: it highlights the syntax in the strings as code (as seen in the example above)

Install

`sh
npm install code-tag
`

Usage

`js
import {html, css, gql, md, sql} from 'code-tag';
// Or:
// const {html, css, gql, md, sql} = require('code-tag');

document.body.innerHTML = html

This is HTML in JS

;

document.querySelector('style').textContent = css
.this.is {
css: 'in JS';
}
;

await githubQuery(gql
query {
repository(owner: "fregante", name: "template-tags") {
nameWithOwner
}
}
);

yourMarkdownConverter(md
# Markdown

Is _highlighted_ as well
);

await sqlQuery(sqlselect * from users);
`

There's also an any export that you can rename as you please:

`js
import {any as mdx} from 'code-tag';

mdx
Some other Language
;
``

License

MIT © Federico Brigante