dgitals-elements v0.2.8

elements

ESTA WEA NECESITA OTRA LIB PA FUNCIINAR

Code Highlight

This react component allows you to highlight your code and make it look prettier wherever you want.

This component makes use of highlight.js plugin.

Installation

To install this Component, run yarn add code-highlight or npm install code-highlight., Don't forget to install highlight.js by running yarn add highlight.js.

Usage

To use the component, In your react Application just do

import React from 'react'
import CodeHighlight from 'code-highlight'

// import all the styles
import 'code-highlight/lib/style.css'
import 'highlight.js/styles/xcode.css'

const MyComponent = props => {
  return (
    <CodeHighlight
      language="javascript"
      title="Hello World in Javascript"
      description="This code will log hello world in the console."
    >
      {`
            	console.log("Hello World");
            `}
    </CodeHighlight>
  )
}

export default MyComponent

You can also provide additional configuration like

<CodeHighlight
  language="" // default: javascript
  title="" // if any
  description="" // if any
  tab="" // what do you want the tab in your code to be replaced with?, default: 4 spaces
  classes={{
    title: '', // class name for the title
    description: '', // class name for description
    pre: '', // class name for pre tag
    code: '' // class name for code tag
  }}
  className="" // if specified this will replace the default class name and its styles.
/>

You can view all the themes/styles for syntax highlighting here https://highlightjs.org/static/demo/ Just import the stylesheet of your choice.

If your webpack configuration doesn't support importing of css stylesheets, Either Google on how to support it or Copy the contents of these stylesheets manually into your css fil