Merge pull request #12 from rajinwonderland/v0.0.8

V0.0.8

.gitignore

@@ -4,4 +4,7 @@ demo/**/node_modules
 packages/**/build
 packages/**/coverage
 packages/**/dist
-.npmrc
+.npmrc
+.vercel
+demo/build
+.netlify

LANGUAGES.md

@@ -1,37 +1,89 @@
 # Available `language` props:
+
 The following languages are supported:
-- bash
+
+- abap
+- actionscript
+- ada
+- arduino
+- autoit
 - c
 - clojure
+- cs
+- c
 - cpp
+- coffeescript
 - csharp
+- css
+- cuda
+- d
 - dart
+- delphi
 - elixir
 - elm
 - erlang
+- fortran
+- foxpro
 - fsharp
-- graphql
 - go
+- graphql
+- gql
 - groovy
 - haskell
+- haxe
 - html
 - java
 - javascript
-- jsx
+- json
 - julia
+- jsx
+- js
 - kotlin
+- latex
 - lisp
+- livescript
+- lua
+- mathematica
 - makefile
 - matlab
 - objectivec
+- objective
+- objective
+- objectpascal
 - ocaml
+- octave
+- perl
 - php
+- powershell
+- prolog
+- puppet
 - python
+- qml
 - r
+- racket
+- restructuredtext
+- rest
 - ruby
 - rust
+- sass
+- less
 - scala
+- scheme
+- shell
+- smalltalk
 - sql
+- standardml
+- sml
 - swift
+- tcl
+- tex
+- text
 - tsx
+- ts
 - typescript
+- vala
+- vbnet
+- verilog
+- vhdl
+- xml
+- xquery

README.md

@@ -4,7 +4,11 @@
   <a href="https://www.npmjs.com/package/react-code-blocks" target="_blank">
     <img alt="Version" src="https://img.shields.io/npm/v/react-code-blocks.svg">
   </a>
-  <a href="WIP" target="_blank">
+   <a href="https://www.npmjs.com/package/react-code-blocks" target="_blank">
+  <img alt="Downloads" src="https://img.shields.io/npm/dw/react-code-blocks">
+  </a>
+  <img src="https://img.shields.io/node/v/react-code-blocks">
+  <a href="https://react-code-blocks.rajinwonderland.vercel.app" target="_blank">
     <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
   </a>
   <a href="#" target="_blank">
@@ -17,8 +21,10 @@
 
 > React components for rendering code snippets with syntax highlighting
 
+> **BREAKING CHANGES**: `VERSION >= 0.0.8-alpha` now requires a nodejs version >= 12
+
 - [Background](#background)
-  - [✨ Demo](#%e2%9c%a8-demo)
+  - [✨ Demo](#-demo)
 - [Install](#install)
 - [Usage](#usage)
 - [Components](#components)
@@ -28,26 +34,27 @@
     - [Props](#props-1)
 - [Supported Themes](#supported-themes)
 - [Supported Languages](#supported-languages)
-- [Author](#author)
 - [Alternatives](#alternatives)
 - [Todos](#todos)
 - [Show your support](#show-your-support)
+- [Author](#author)
 
 ## 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!
+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](https://help.github.com/en/github/managing-your-work-on-github/creating-an-issue) or a [pr](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
 
-
 ### ✨ [Demo](https://react-code-blocks.netlify.com/)
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a2a9f006-efd5-476f-ade6-11cde1ddc11e/deploy-status)](https://app.netlify.com/sites/react-code-blocks/deploys)
 
 [![Check out react-code-blocks](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-code-blocks-xgjrr?fontsize=14)
 
-
 ## Install
+
 Install `react-code-blocks` via `yarn` or `npm`
+
 ```sh
 yarn add react-code-blocks
 ```
@@ -57,89 +64,101 @@ npm i react-code-blocks
 ```
 
 ## Usage
+
+> Updated usage instructions can be found [here](https://react-code-blocks.rajinwonderland.vercel.app/)
+
 ```js
-import { CopyBlock } from 'react-code-blocks'
+import { CopyBlock } from "react-code-blocks";
 ```
+
 ```js
-function MyCodeComponent(props){
- return (
-   <CopyBlock
-    text={props.code}
-		language={props.language}
-		showLineNumbers={props.showLineNumbers}
-		wrapLines
-  />
- )
+function MyCodeComponent(props) {
+  return (
+    <CopyBlock
+      text={props.code}
+      language={props.language}
+      showLineNumbers={props.showLineNumbers}
+      wrapLines
+    />
+  );
 }
 ```
 
 ## Components
 
 ### CodeBlock
+
 A simple code block component
 
 ```js
-import { CodeBlock, dracula } from 'react-code-blocks'
+import { CodeBlock, dracula } from "react-code-blocks";
 
-function MyCoolCodeBlock({code, language, showLineNumbers}){
+function MyCoolCodeBlock({ code, language, showLineNumbers }) {
   return (
     <CodeBlock
       text={code}
       language={language}
       showLineNumbers={showLineNumbers}
       theme={dracula}
-      wrapLines
     />
-  )
+  );
 }
 ```
+
 #### Props
+
 > Note that `CodeBlock` & `CopyBlock` share exactly the same props
 
 | name              | type      | default      | description                                                                                                                                                    |
 | ----------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `text`            | `string`  | __required__ | The code to be formatted                                                                                                                                       |
+| `text`            | `string`  | **required** | The code to be formatted                                                                                                                                       |
 | `language`        | `string`  | "text"       | The language in which the code is written. [See here](LANGUAGES.md) 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](THEMES.md) for a list of supported themes |                                                                       |
+| `theme`           | `object`  | **dracula**  | A theme object for the code block. [See here](THEMES.md) 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...__
+
+> **more to come...**
 
 ### CopyBlock
+
 A code block component with a little copy button for copying a snippet.
 
 ```jsx
-import { CopyBlock, dracula } from 'react-code-blocks'
+import { CopyBlock, dracula } from "react-code-blocks";
 
-function MyCoolCodeBlock({code, language, showLineNumbers}){
+function MyCoolCodeBlock({ code, language, showLineNumbers }) {
   <CopyBlock
-		text={code}
-		language={language}
-		showLineNumbers={showLineNumbers}
-		theme={dracula}
-    wrapLines
+    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    
-| ----------- | --------- | ------- | --- 
+| name        | type      | default | description                                                                                          |
+| ----------- | --------- | ------- | ---------------------------------------------------------------------------------------------------- |
 | `codeBlock` | `boolean` | `false` | Indicates whether to render the `CopyBlock` as an inline `Code` component or a `CodeBlock` component |
 
-
 ## Supported Themes
+
 For a list of supported themes, check out the [list here](THEMES.md)
 
 ## Supported Languages
+
 For a list of supported languages, check out the [list here](LANGUAGES.md)
 
 ## Alternatives
+
 If you're looking for some more maintained solutions, I'd suggest the following:
+
 - [`react-syntax-highlighter`](https://github.com/conorhastings/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! :smile:
 - [`react-highlight.js`](https://github.com/bvaughn/react-highlight.js): A lightweight React wrapper around the `Highlight.js` syntax highlighting library by @bvaughn.
@@ -151,6 +170,7 @@ If you're looking for some more maintained solutions, I'd suggest the following:
 > Feel free to add any other alternative packages here! :smile:
 
 ## Todos
+
 - [x] Add a better readme
 - [x] Highlighting line feature
 - [x] Supported Themes documentation
@@ -163,24 +183,25 @@ If you're looking for some more maintained solutions, I'd suggest the following:
 - [ ] 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](https://github.com/kefranabg/readme-md-generator)_
+---
 
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
 
 ## Author
+
 <div style="display:grid">
 <img src="https://avatars3.githubusercontent.com/u/15880596?s=460&v=4" width="175px"/>
 <img src="packages/assets/rajinwonderland.png" height="175px" />
 </div>
 
-
-* Website: https://novvum.io
-* Twitter: [@rajinwonderland](https://twitter.com/rajinwonderland)
-* Github: [@rajinwonderland](https://github.com/rajinwonderland)
+- Website: https://novvum.io
+- Twitter: [@rajinwonderland](https://twitter.com/rajinwonderland)
+- Github: [@rajinwonderland](https://github.com/rajinwonderland)