Nanometers Per Millisecond

    @discostudioteam/react-code-blocks
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1-0 • Public • Published

    Welcome to react-code-blocks 👋👋👋

    Version Downloads Documentation License: MIT Twitter: rajinwonderland

    React components for rendering code snippets with syntax highlighting

    BREAKING CHANGES: VERSION >= 0.0.8-alpha now requires a nodejs version >= 12

    Background

    Initially, this started as a small project looking to modify Atlaskit's Code Block component to support more languages (i.e graphql, reasonml, etc). It then rapidly evolved into a never-ending rabbithole which ended up with support for themes (i.e railscast, darcula, monokai, etc), customizable styles, and copy functionality too!

    I don't plan on keeping this updated unless people are looking to actually use it. So don't be shy! Feel free to post an issue or a pr.

    Demo

    Netlify Status

    Check out react-code-blocks

    Install

    Install react-code-blocks via yarn or npm

    yarn add react-code-blocks
    npm i react-code-blocks

    Usage

    Updated usage instructions can be found here

    import { CopyBlock } from "react-code-blocks";
    function MyCodeComponent(props) {
      return (
        <CopyBlock
          text={props.code}
          language={props.language}
          showLineNumbers={props.showLineNumbers}
          wrapLines
        />
      );
    }

    Components

    CodeBlock

    A simple code block component

    import { CodeBlock, dracula } from "react-code-blocks";
    
    function MyCoolCodeBlock({ code, language, showLineNumbers }) {
      return (
        <CodeBlock
          text={code}
          language={language}
          showLineNumbers={showLineNumbers}
          theme={dracula}
        />
      );
    }

    Props

    Note that CodeBlock & CopyBlock share exactly the same props

    name type default description
    text string required The code to be formatted
    language string "text" The language in which the code is written. See here for a list of supported languages
    showLineNumbers boolean true Indicates whether or not to show line numbers
    theme object dracula A theme object for the code block. See here for a list of supported themes
    highlight string "" Lines to highlight! For multiple lines, use a comma i.e highlight="1,6,7". For a range of lines, use a - i.e highlight="1-5" for highlighting lines 1-5.

    more to come...

    CopyBlock

    A code block component with a little copy button for copying a snippet.

    import { CopyBlock, dracula } from "react-code-blocks";
    
    function MyCoolCodeBlock({ code, language, showLineNumbers }) {
      <CopyBlock
        text={code}
        language={language}
        showLineNumbers={showLineNumbers}
        theme={dracula}
        codeBlock
      />;
    }

    Props

    Same as the CodeBlock's component with the exception of one!

    name type default description
    codeBlock boolean false Indicates whether to render the CopyBlock as an inline Code component or a CodeBlock component
    onCopy function - The onCopy function is called if the copy icon is clicked. This enables you to add a custom message that the code block is copied

    Supported Themes

    For a list of supported themes, check out the list here

    Supported Languages

    For a list of supported languages, check out the list here

    Alternatives

    If you're looking for some more maintained solutions, I'd suggest the following:

    • react-syntax-highlighter: syntax highlighting component for react with prismjs or highlightjs ast using inline styles by @conorhastings.
      • It's actually used in this project as well! 😄
    • react-highlight.js: A lightweight React wrapper around the Highlight.js syntax highlighting library by @bvaughn.
    • react-live: A flexible playground for live editing React components by @FormidableLabs.
    • @atlaskit/code: Renders inline code snippets and code blocks
      • Original inspiration for this project kit for this project
    • carbon-components-react: Check out their <CodeSnippet> component which supports multi-line, single-line, and inline snippets along with added copying functionality.

    Feel free to add any other alternative packages here! 😄

    Todos

    • [x] Add a better readme
    • [x] Highlighting line feature
    • [x] Supported Themes documentation
    • [x] Supported Languages documentation
    • [x] Add a License
    • [ ] Docs for usage with GatsbyJS
    • [ ] Docs for usage with MDX
    • [ ] Contributor guide for development
    • [ ] Contributor guide for adding themes
    • [ ] Contributor guide for adding languages
    • [ ] Document props for Code component
    • [ ] Better demo
    • [x] Storybook with Docs
    • [x] Move to typescript
    • [ ] A component with a terminal around it. because why not!? 🧐

    Show your support

    Give a ⭐️ if this project helped you!


    This README was generated with ❤️ by readme-md-generator

    Author

    Install

    npm i @discostudioteam/react-code-blocks

    DownloadsWeekly Downloads

    4

    Version

    0.1.1-0

    License

    MIT

    Unpacked Size

    908 kB

    Total Files

    146

    Last publish

    Collaborators

    • bchoi