README
@codeblock/react
A react component for easy syntax highlighting.
Uses Prism.js under the hood.
The goal of this component is to make it really easy to use Prism.js in react.
There are two types of common resources for prism: themes and languages (called "components" in prism).
The @codeblock
provides you a couple of ways of how to include and provide these resources, most importantly static
, async
and http
.
@codeblock/react
- Defaults to/static
@codeblock/react/empty
- noop-loaders, doesn't include resources@codeblock/react/static
- static imports, all resources included@codeblock/react/async
- dynamic imports and code-splitting@codeblock/react/http
- AJAX@codeblock/react/cdn
loading and bundling
static
import at compiletime viarequire()
async
imports at runtime viaimport()
http
loads at runtime viaautoloader
static
The static
variant requires all resources directly in the source code. This will seriously increase the size of your output bundle, and it will not create any additional output files.
Note: static
does not yet automatically load language dependencies (like jsx
for tsx
, or clike
for cpp
)
async
The async
variant uses code splitting and needs to be used with a bundler that supports dynamic imports, like webpack or rollup. it comes with predefined webpackChunkNames
.
Note: async
does not yet automatically load language dependencies (like jsx
for tsx
, or clike
for cpp
)
function MyCode
Installation
Install normally via yarn or npm:
# via yarn
yarn add @codeblock/react
# via npm
npm install --save @codeblock/react
Usage
@codeblock
React components for @codeblock