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
- 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)
npm install code-tagimport {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>
`;MIT © Federico Brigante
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent