This package has been deprecated

Author message:

This projecet has been abadoned in favour of better solutions of syntax highlighting. There is no real need for this package. Please look towards other solutuons

@favware/syntax-highlighter-react
TypeScript icon, indicating that this package has built-in type declarations

1.1.2 • Public • Published

logo

@favware/syntax-highlighter-react

A lightweight, easy-to-use and framework agnostic syntax highlighter for your code examples(snippets) in web applications

License Depfu Patreon

npm npm

Stencil

Support Server

Table of Contents

Why yet another code highlighter?

There are many syntax highlighters avaliable already but most of those are either complex to setup or front end framework specific. @favware/syntax-highlighter-react is built using StencilJS. You can use it everywhere, i.e. Angular, React, Vue, any framework, No Framework!

This is an adoptation of snippet-highlight from rahulbhooteshwar

Features

  • Uses PrismJS for syntax highlighting
  • Light and Dark mode supported
  • Copy code support
  • Supports many languages, see Supported Languages
  • Will default to using Fira Code as font family
    • The library first falls back to popular fonts such as Cascadia Code and Meslo NGF if it isn't available. If these are also not available it will go through various more popular coding fonts, ending in monospace

Installation

yarn add @favware/syntax-highlighter-react @favware/syntax-highlighter-react
# or npm install @favware/syntax-highlighter-react @favware/syntax-highlighter-react

Usage

Edit Button

The syntax is kept fairly simple. Here's a basic example of some simple JavaScript code:

import { SyntaxHighlighter } from '@favware/syntax-highlighter-react';

<SyntaxHighlighter theme="dark" language="javascript" content="import { SyntaxHighlighter } from @favware/syntax-highlighter-react" />;

Supported Languages

To limit the size of this library a selection has been made from all langauges supported by PrismJS. The chosen languages are those that we consider the most popular / common. If you want to see another languages supported you're always free to open an issue

javascript, typescript, asciidoc, autohotkey, autoit, bash, batch,
 
c, clike, clojure, coffeescript, cpp, csharp, csp, css, dart,
 
diff, docker, elixir, gherkin, git, go, graphql, groovy, http,
 
ini, java, json, jsx, kotlin, less, lua, makefile, markdown,
 
nginx, objectivec, powershell, python, ruby, rust, sass, scala,
 
scss, sql, swift, tsx, vim, visual-basic, wasm, wiki, yaml

Screenshots

Dark Mode

Light Mode

Package Sidebar

Install

npm i @favware/syntax-highlighter-react

Weekly Downloads

3

Version

1.1.2

License

MIT

Unpacked Size

31.1 kB

Total Files

6

Last publish

Collaborators

  • favna
  • favware-bot