code-tag
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

code-tag npm version (size)

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:

document.body.innerHTML = html`
	<p>This is inline HTML</p>
	<!-- Including comments -->
	<style>.and {css: 'too'}</style>
`;

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

npm install code-tag

Usage

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

document.body.innerHTML = html`
	<p>This is HTML in JS</p>
`;

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](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
`);

await sqlQuery(sql`select * from users`);

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

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

mdx`
	Some other <New>Language</New>
`;

License

MIT © Federico Brigante

Package Sidebar

Install

npm i code-tag

Weekly Downloads

9,200

Version

1.2.0

License

MIT

Unpacked Size

6.67 kB

Total Files

8

Last publish

Collaborators

  • fregante