` or css`.a {}`
11 | https://prettier.io/docs/en/options.html#embedded-language-formatting
12 | */
13 | const any = concatenateTemplateLiteralTag;
14 |
15 | export {
16 | any,
17 | any as html,
18 | any as css,
19 | any as gql,
20 | any as graphql,
21 | any as md,
22 | any as markdown,
23 | any as sql,
24 | };
25 |
--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Federico Brigante
(https://fregante.com)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-tag",
3 | "version": "1.2.0",
4 | "description": "noop functions to help formatters and syntax highlighters recognize embedded code",
5 | "keywords": [
6 | "prettier",
7 | "syntax",
8 | "highlight",
9 | "highlighting",
10 | "format",
11 | "formatting",
12 | "embedded language formatting",
13 | "markup",
14 | "html",
15 | "css",
16 | "graphql",
17 | "template literals",
18 | "tag"
19 | ],
20 | "repository": "fregante/code-tag",
21 | "funding": "https://github.com/sponsors/fregante",
22 | "license": "MIT",
23 | "author": "Federico Brigante (https://fregante.com)",
24 | "exports": {
25 | "require": "./cjs/index.js",
26 | "types": "./cjs/index.d.ts",
27 | "default": "./esm/index.js"
28 | },
29 | "main": "cjs/index.js",
30 | "module": "esm/index.js",
31 | "types": "cjs/index.d.ts",
32 | "files": [
33 | "cjs",
34 | "esm"
35 | ],
36 | "scripts": {
37 | "build": "tsc && tsc --outDir cjs --module commonjs --moduleResolution node",
38 | "prepack": "npm run build",
39 | "test": "xo && npm run build && node --test",
40 | "watch": "tsc --watch"
41 | },
42 | "xo": {
43 | "rules": {
44 | "import/order": "off"
45 | }
46 | },
47 | "devDependencies": {
48 | "@sindresorhus/tsconfig": "^5.0.0",
49 | "typescript": "^5.3.3",
50 | "xo": "^0.56.0"
51 | },
52 | "engines": {
53 | "node": ">=18"
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # code-tag [][link-npm] [![(size)][badge-gzip]](#no-link)
2 |
3 | [badge-gzip]: https://img.shields.io/bundlephobia/minzip/code-tag.svg?label=gzipped
4 | [link-npm]: https://www.npmjs.com/package/code-tag
5 |
6 | > noop functions to help formatters and syntax highlighters recognize embedded code
7 |
8 | When embedding other languages in JavaScript, you can mark those strings with a [tag function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) to help JavaScript tools recognize the string as code:
9 |
10 | ```js
11 | document.body.innerHTML = html`
12 | This is inline HTML
13 |
14 |
15 | `;
16 | ```
17 |
18 | You can find such tag functions in:
19 |
20 | - **code-tag**: this package, it returns the string as is
21 | - [escape-goat](https://github.com/sindresorhus/escape-goat): it escapes the any replaced value in the string
22 | - [lit-html](https://lit.dev/docs/templates/overview/): it helps write Web Components
23 | - [Apollo](https://www.apollographql.com/docs/resources/graphql-glossary/#gql-function): it parses GraphQL strings
24 | - [Emotion](https://emotion.sh/docs/@emotion/css): it defines CSS-in-JS
25 | - etc…
26 |
27 | Here are some tools that support them natively:
28 |
29 | - [Prettier](https://prettier.io/docs/en/options.html#embedded-language-formatting): it formats the strings as real non-JavaScript code
30 | - GitHub: it highlights the syntax in the strings as code (as seen in the example above)
31 |
32 | ## Install
33 |
34 | ```sh
35 | npm install code-tag
36 | ```
37 |
38 | ## Usage
39 |
40 | ```js
41 | import {html, css, gql, md, sql} from 'code-tag';
42 | // Or:
43 | // const {html, css, gql, md, sql} = require('code-tag');
44 |
45 | document.body.innerHTML = html`
46 | This is HTML in JS
47 | `;
48 |
49 | document.querySelector('style').textContent = css`
50 | .this.is {
51 | css: 'in JS';
52 | }
53 | `;
54 |
55 | await githubQuery(gql`
56 | query {
57 | repository(owner: "fregante", name: "template-tags") {
58 | nameWithOwner
59 | }
60 | }
61 | `);
62 |
63 | yourMarkdownConverter(md`
64 | # Markdown
65 |
66 | Is _highlighted_ [as well](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
67 | `);
68 |
69 | await sqlQuery(sql`select * from users`);
70 | ```
71 |
72 | There's also an `any` export that you can rename as you please:
73 |
74 | ```js
75 | import {any as mdx} from 'code-tag';
76 |
77 | mdx`
78 | Some other Language
79 | `;
80 | ```
81 |
82 | ## License
83 |
84 | MIT © [Federico Brigante](https://fregante.com)
85 |
--------------------------------------------------------------------------------
/test.mjs:
--------------------------------------------------------------------------------
1 | import assert from 'node:assert/strict';
2 | import {createRequire} from 'node:module';
3 | import {describe, it} from 'node:test';
4 |
5 | // The tests specifically import the built files to ensure that they're generated correctly
6 | import * as esm from './esm/index.js';
7 |
8 | const require = createRequire(import.meta.url);
9 | const cjs = require('./cjs/index.js');
10 |
11 | testContext(cjs, 'cjs');
12 | testContext(esm, 'esm');
13 |
14 | function testContext({any, html, css, gql, md, sql}, name) {
15 | describe(name + ' imports', () => {
16 | it('exports', () => {
17 | assert.equal(any, html);
18 | assert.equal(any, css);
19 | assert.equal(any, gql);
20 | assert.equal(any, md);
21 | assert.equal(any, sql);
22 | });
23 |
24 | it('code-tag', () => {
25 | assert.equal(any`a`, 'a');
26 | assert.equal(any` a `, ' a ', 'Preserve boundary whitespace');
27 | assert.equal(any`a${'b'}c${1}`, 'abc1', 'Interpolate with strings and numbers');
28 | assert.equal(any`\\\na\\\na`, '\\\na\\\na', 'Preserve escape sequences');
29 | assert.equal(any`\\\na${'\\\na'}`, '\\\na\\\na', 'Preserve escape sequences in interpolation');
30 | assert.equal(any`🇪🇺 🇺🇳`, '🇪🇺 🇺🇳', 'Preserve combined emojis');
31 | assert.equal(any`🇪🇺 ${'🇺🇳'}`, '🇪🇺 🇺🇳', 'Preserve combined emojis in interpolation');
32 | });
33 |
34 | it('stringifiable objects', () => {
35 | const stringifiableObject = new Date();
36 | const stringifiedObject = String(stringifiableObject);
37 |
38 | assert.equal(any`${stringifiableObject}`, stringifiedObject, 'Interpolate objects with toString');
39 | });
40 | });
41 | }
42 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@sindresorhus/tsconfig",
3 | "compilerOptions": {
4 | "module": "es2020",
5 | "moduleResolution": "Bundler",
6 | "outDir": "esm"
7 | },
8 | "files": [
9 | "index.ts"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------