https://github.com/jaydenseric/babel-plugin-syntax-highlight

A Babel plugin that transforms the code contents of template literals lead by comments specifying a Prism.js language into syntax highlighted HTML.
https://github.com/jaydenseric/babel-plugin-syntax-highlight

babel maintained node npm prism

Last synced: 3 months ago
JSON representation

A Babel plugin that transforms the code contents of template literals lead by comments specifying a Prism.js language into syntax highlighted HTML.

• Host: GitHub
• URL: https://github.com/jaydenseric/babel-plugin-syntax-highlight
• Owner: jaydenseric
• License: mit
• Created: 2019-09-09T05:59:27.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-25T23:44:32.000Z (over 2 years ago)
• Last Synced: 2024-10-04T14:20:59.147Z (4 months ago)
• Topics: babel, maintained, node, npm, prism
• Language: JavaScript
• Homepage: https://npm.im/babel-plugin-syntax-highlight
• Size: 62.5 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • Funding: .github/funding.yml
  • License: license.md

Awesome Lists containing this project

README

        
# babel-plugin-syntax-highlight

A [Babel](https://babeljs.io) plugin that transforms the code contents of template literals lead by comments specifying a [Prism.js](https://prismjs.com) language into syntax highlighted HTML.

Build-time syntax highlighting advantages:

- 🚀 No runtime JS to slow page loads.

- 🖌 Less client rendering work.

- 🎨 Beautiful code the instant the HTML and CSS loads.

## Installation

To install [`babel-plugin-syntax-highlight`](https://npm.im/babel-plugin-syntax-highlight) with [npm](https://npmjs.com/get-npm), run:

```sh

npm install babel-plugin-syntax-highlight --save-dev

```

Configure [Babel](https://babeljs.io) to use the plugin:

```json

{

  "plugins": ["syntax-highlight"]

}

```

## Examples

In a file transpiled by [Babel](https://babeljs.io), lead a template literal containing syntax to highlight with a comment containing `syntax-highlight` and a [Prism.js language name](https://prismjs.com/#supported-languages):

```js

const highlighted = /* syntax-highlight graphql */ `

  scalar Upload

`;

```

The comment may be surrounded by others on the same or other lines for editor syntax highlighting, [Prettier](https://prettier.io) formatting, etc.

```js

const highlighted =

  /* syntax-highlight graphql */

  /* GraphQL */ `

    scalar Upload

  `;

```

A block or line comment may be used:

```js

const highlighted =

  // syntax-highlight graphql

  `scalar Upload`;

```

The plugin removes the comment (preserving surrounding comments) and transforms the template literal contents into HTML:

```js

const highlighted = `scalar Upload`;

```

Styling the HTML is up to you; there are many theme stylesheets available. Often themes require `
` and `` containers with appropriate language classes.


A [React](https://reactjs.org) component can be used display highlighted code with appropriate HTML and styles:

```jsx

function SyntaxHighlightedCode({ language, code }) {

  return (

    

      

    

  );

}

```


```jsx

const syntaxHighlightedCode = (

  

);

```

## Requirements

Supported runtime environments:

- [Node.js](https://nodejs.org) versions `^14.17.0 || ^16.0.0 || >= 18.0.0`.

Projects must configure [TypeScript](https://typescriptlang.org) to use types from the modules that have a `// @ts-check` comment:

- [`compilerOptions.allowJs`](https://typescriptlang.org/tsconfig#allowJs) should be `true`.

- [`compilerOptions.maxNodeModuleJsDepth`](https://typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.

- [`compilerOptions.module`](https://typescriptlang.org/tsconfig#module) should be `"node16"` or `"nodenext"`.

## Exports

The [npm](https://npmjs.com) package [`babel-plugin-syntax-highlight`](https://npm.im/babel-plugin-syntax-highlight) features [optimal JavaScript module design](https://jaydenseric.com/blog/optimal-javascript-module-design). These CommonJS modules are exported via the [`package.json`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):

- [`babelPluginSyntaxHighlight.js`](./babelPluginSyntaxHighlight.js)