├── .babelrc ├── .codeclimate.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── docs ├── .gitkeep ├── build │ ├── 0.355cdadd.js │ └── bundle.961f31c3.js └── index.html ├── lib ├── components │ ├── PrismCode.js │ └── PrismCode.test.js ├── index.js └── index.test.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── components │ ├── PrismCode.js │ ├── PrismCode.md │ └── PrismCode.test.js ├── index.js └── index.test.js ├── styleguide └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "test": { 4 | "plugins": [ 5 | "typecheck" 6 | ] 7 | } 8 | }, 9 | "plugins": [ 10 | "transform-flow-comments" 11 | ], 12 | "presets": [ 13 | ["env", { 14 | "targets": { 15 | "ie": 9, // https://github.com/facebookincubator/create-react-app/blob/v1.0.10/packages/babel-preset-react-app/index.js#L102 16 | } 17 | }], 18 | "stage-0", 19 | "react" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | # This is a sample .codeclimate.yml configured for Engine analysis on Code 2 | # Climate Platform. For an overview of the Code Climate Platform, see here: 3 | # http://docs.codeclimate.com/article/300-the-codeclimate-platform 4 | 5 | # Under the engines key, you can configure which engines will analyze your repo. 6 | # Each key is an engine name. For each value, you need to specify enabled: true 7 | # to enable the engine as well as any other engines-specific configuration. 8 | 9 | # For more details, see here: 10 | # http://docs.codeclimate.com/article/289-configuring-your-repository-via-codeclimate-yml#platform 11 | 12 | # For a list of all available engines, see here: 13 | # http://docs.codeclimate.com/article/296-engines-available-engines 14 | 15 | engines: 16 | # to turn on an engine, add it here and set enabled to `true` 17 | # to turn off an engine, set enabled to `false` or remove it 18 | eslint: 19 | enabled: true 20 | 21 | # Engines can analyze files and report issues on them, but you can separately 22 | # decide which files will receive ratings based on those issues. This is 23 | # specified by path patterns under the ratings key. 24 | 25 | # For more details see here: 26 | # http://docs.codeclimate.com/article/289-configuring-your-repository-via-codeclimate-yml#platform 27 | 28 | ratings: 29 | paths: 30 | - src/** 31 | 32 | # You can globally exclude files from being analyzed by any engine using the 33 | # exclude_paths key. 34 | 35 | exclude_paths: 36 | - lib/** 37 | - public/** 38 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{js,py}] 14 | charset = utf-8 15 | 16 | # 4 space indentation 17 | [*.py] 18 | indent_style = space 19 | indent_size = 4 20 | 21 | # Tab indentation (no size specified) 22 | [Makefile] 23 | indent_style = tab 24 | 25 | # Indentation override for all JS under lib directory 26 | [*.js] 27 | indent_style = space 28 | indent_size = 2 29 | 30 | # Matches the exact files either package.json or .travis.yml 31 | [{package.json,.travis.yml}] 32 | indent_style = space 33 | indent_size = 2 34 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/** 2 | coverage/** 3 | docs/** 4 | lib/** 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "parserOptions": { 4 | "ecmaVersion": 2016, 5 | "sourceType": "module" 6 | }, 7 | "env": { 8 | "es6": true, 9 | "node": true, 10 | "jest": true 11 | }, 12 | "extends": [ 13 | "prettier", 14 | "prettier/flowtype", 15 | "prettier/react" 16 | ], 17 | "plugins": [ 18 | "prettier" 19 | ], 20 | "rules": { 21 | "prettier/prettier": ["warn"] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by http://www.gitignore.io 2 | 3 | ### Editor 4 | *.swp 5 | 6 | ### Node ### 7 | # Logs 8 | logs 9 | *.log 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | 16 | # OSX 17 | .DS_Store 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Compiled binary addons (http://nodejs.org/api/addons.html) 29 | build/Release 30 | 31 | # Dependency directory 32 | # Commenting this out is preferred by some people, see 33 | # https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 34 | node_modules 35 | 36 | # Users Environment Variables 37 | .lock-wscript 38 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": false, 4 | "trailingComma": "es5" 5 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | dist: trusty 2 | sudo: required 3 | language: node_js 4 | node_js: 5 | - '6' 6 | - '8' 7 | script: 8 | - npm test -- --coverage 9 | after_script: 10 | - if [[ `node --version` == *v6* ]]; then cat ./coverage/lcov.info | ./node_modules/.bin/codeclimate-test-reporter; 11 | fi 12 | env: 13 | global: 14 | secure: Tjv451jv8ksGOEcd3g/5zffmUvrKxfv5mSZ8uZ//xsL5GzZ1IfxQd7HvM84mAx/it6Y5tnWh/4KkoTJck0NRw41ZAFB6FsJkEZIy8w2/EdRseSznjBwEgHLE36m3YPQ+ktGHMffLxEanPGy2pymhkrLmIruupPKbpPgChKG9oWU= 15 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | 6 | ## [4.3.2](https://github.com/tomchentw/react-prism/compare/v4.3.1...v4.3.2) (2018-01-02) 7 | 8 | 9 | 10 | 11 | ## [4.3.1](https://github.com/tomchentw/react-prism/compare/v4.3.0...v4.3.1) (2017-09-30) 12 | 13 | 14 | 15 | 16 | # [4.3.0](https://github.com/tomchentw/react-prism/compare/v4.2.0...v4.3.0) (2017-07-04) 17 | 18 | 19 | ### Features 20 | 21 | * **PrismCode:** allow to configure the wrapper component ([57a117c](https://github.com/tomchentw/react-prism/commit/57a117c)), closes [#34](https://github.com/tomchentw/react-prism/issues/34) 22 | 23 | 24 | 25 | 26 | # [4.2.0](https://github.com/tomchentw/react-prism/compare/v4.1.0...v4.2.0) (2017-06-30) 27 | 28 | 29 | ### Bug Fixes 30 | 31 | * **.babelrc:** `env`, `stage-0` and `react` as presets ([3d6b2e9](https://github.com/tomchentw/react-prism/commit/3d6b2e9)) 32 | 33 | 34 | ### Features 35 | 36 | * **package.json:** revamp scripts for `styleguidist` ([a245d6c](https://github.com/tomchentw/react-prism/commit/a245d6c)) 37 | 38 | 39 | 40 | 41 | # [4.1.0](https://github.com/tomchentw/react-prism/compare/v4.0.0...v4.1.0) (2017-04-28) 42 | 43 | 44 | ### Features 45 | 46 | * **package.json:** add "prop-types" to peerDependencies ([417e9f5](https://github.com/tomchentw/react-prism/commit/417e9f5)) 47 | * **PrismCode:** replace React.PropTypes with "prop-types" package ([b20ec63](https://github.com/tomchentw/react-prism/commit/b20ec63)), closes [#31](https://github.com/tomchentw/react-prism/issues/31) 48 | 49 | 50 | 51 | 52 | # [4.0.0](https://github.com/tomchentw/react-prism/compare/v3.2.2...v4.0.0) (2016-09-21) 53 | 54 | 55 | ### Features 56 | 57 | * **package.json:** upgrade peerDependencies to `react@^15.3.0` ([963b33d](https://github.com/tomchentw/react-prism/commit/963b33d)) 58 | * **PrismCode:** switch react-addons-pure-render-mixin to React.PureComponent ([#25](https://github.com/tomchentw/react-prism/issues/25)) ([de25f69](https://github.com/tomchentw/react-prism/commit/de25f69)), closes [#21](https://github.com/tomchentw/react-prism/issues/21) 59 | 60 | 61 | ### BREAKING CHANGES 62 | 63 | * package.json: drop support for `react@^0.14.0` 64 | * package.json: remove peerDependency of `react-addons-pure-render-mixin` 65 | 66 | 67 | 68 | 69 | ## [3.2.2](https://github.com/tomchentw/react-prism/compare/v3.2.1...v3.2.2) (2016-09-20) 70 | 71 | 72 | 73 | 74 | ## [3.2.1](https://github.com/tomchentw/react-prism/compare/v3.2.0...v3.2.1) (2016-05-31) 75 | 76 | 77 | 78 | 79 | # [3.2.0](https://github.com/tomchentw/react-prism/compare/v3.1.1...v3.2.0) (2016-04-26) 80 | 81 | 82 | ### Features 83 | 84 | * **package.json:** update to react@^15.0.0 ([06f7b91](https://github.com/tomchentw/react-prism/commit/06f7b91)) 85 | 86 | 87 | 88 | 89 | ## [3.1.1](https://github.com/tomchentw/react-prism/compare/v3.1.0...v3.1.1) (2016-01-28) 90 | 91 | 92 | 93 | 94 | 95 | # [3.1.0](https://github.com/tomchentw/react-prism/compare/v3.0.0...v3.1.0) (2016-01-19) 96 | 97 | 98 | ### Features 99 | 100 | * **PrismCode:** switch to "react-addons-pure-render-mixin" ([da0f917](https://github.com/tomchentw/react-prism/commit/da0f917)), closes [#14](https://github.com/tomchentw/react-prism/issues/14) 101 | 102 | 103 | 104 | 105 | # [3.0.0](https://github.com/tomchentw/react-prism/compare/v2.0.0...v3.0.0) (2015-10-08) 106 | 107 | 108 | ### Features 109 | 110 | * **package.json:** upgrade to React@^0.14 ([f35be91](https://github.com/tomchentw/react-prism/commit/f35be91)) 111 | 112 | 113 | ### BREAKING CHANGES 114 | 115 | * * __React@^0.14__: upgrade React in peerDependencies 116 | 117 | 118 | 119 | 120 | # [2.0.0](https://github.com/tomchentw/react-prism/compare/v1.4.1...v2.0.0) (2015-10-02) 121 | 122 | 123 | ### Features 124 | 125 | * **PrismCode:** upgrade to support react@^0.14.0-rc1 ([cb0a0fa](https://github.com/tomchentw/react-prism/commit/cb0a0fa)) 126 | 127 | 128 | 129 | 130 | ### 1.4.1 (2015-07-01) 131 | 132 | 133 | #### Bug Fixes 134 | 135 | * **src:** eslint rules ([f6563724](https://github.com/tomchentw/react-prism/commit/f6563724)) 136 | 137 | 138 | ## 1.4.0 (2015-06-17) 139 | 140 | 141 | #### Features 142 | 143 | * **PrismCode:** ES2015 format to prevent eslint warnings ([e0b58d8e](https://github.com/tomchentw/react-prism/commit/e0b58d8e8d4242d421cdabc0935d4c0cc8f92904)) 144 | 145 | 146 | ### 1.3.2 (2015-06-17) 147 | 148 | 149 | ### 1.3.1 (2015-05-21) 150 | 151 | 152 | #### Bug Fixes 153 | 154 | * **package.json:** test ([f80cef1d](https://github.com/tomchentw/react-prism/commit/f80cef1d9edb659efab3540b834d903e933c6530)) 155 | 156 | 157 | ## 1.3.0 (2015-04-27) 158 | 159 | 160 | #### Bug Fixes 161 | 162 | * **webpack.config.js:** node_modules are excluded from js loaders ([2d314148](https://github.com/tomchentw/react-prism/commit/2d31414808c9871dde5648684e9f5ed070ad4e7c)) 163 | 164 | 165 | #### Features 166 | 167 | * **package.json:** update to react@0.13 and add peerDependencies ([2d758ba8](https://github.com/tomchentw/react-prism/commit/2d758ba810be54bced3342c4ca2ef0a68874e941)) 168 | 169 | 170 | ### 1.2.1 (2014-11-20) 171 | 172 | 173 | ## 1.2.0 (2014-11-09) 174 | 175 | 176 | #### Features 177 | 178 | * **PrismCode:** should respond to children update ([a85082d6](https://github.com/tomchentw/react-prism/commit/a85082d631aa12d66fabfdeda926efe5d3bf94e3)) 179 | 180 | 181 | ## 1.1.0 (2014-11-08) 182 | 183 | 184 | #### Bug Fixes 185 | 186 | * **PrismCode:** async option should be truely async ([29d6717d](https://github.com/tomchentw/react-prism/commit/29d6717dc52fc0d430f44af6ca05448fa68642c9)) 187 | 188 | 189 | ## 1.0.0 (2014-11-08) 190 | 191 | 192 | #### Features 193 | 194 | * **PrismCode:** 195 | * expose async as property and default to true ([45bb5a6c](https://github.com/tomchentw/react-prism/commit/45bb5a6cfe0f5d41f3561de6b608ea98c4e0797d)) 196 | * use Prism.highlightElement and update html later ([c6cc478e](https://github.com/tomchentw/react-prism/commit/c6cc478e1867e7596fb0e328766a2d0176697a6c)) 197 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React-Prism 2 | 3 | ## Convention 4 | 5 | ### `src/lib` contains core library 6 | 7 | * Please add new features/fix bugs here 8 | * They'll be compiled by babel into `lib` folder 9 | * Don't manually modify contents under `lib` folder 10 | 11 | ### `src/app` contains docs app 12 | 13 | * It can be served as local app for core library development 14 | * It'll be released as `gh-pages` into `build` folder 15 | * Don't manually modify contents under `build` folder 16 | 17 | 18 | ## Development 19 | 20 | ```shell 21 | git clone ... 22 | npm install 23 | npm start 24 | ``` 25 | 26 | Now you can develop! 27 | 28 | 29 | ## Contributing 30 | 31 | [![devDependency Status][david-dm-image]][david-dm-url] 32 | 33 | 1. Fork it 34 | 2. Create your feature branch (`git checkout -b my-new-feature`) 35 | 3. Commit your changes (`git commit -am 'Add some feature'`) 36 | 4. Push to the branch (`git push origin my-new-feature`) 37 | 5. Create new pull request 38 | 39 | [david-dm-image]: https://img.shields.io/david/dev/tomchentw/react-prism.svg?style=flat-square 40 | [david-dm-url]: https://david-dm.org/tomchentw/react-prism#info=devDependencies 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Tom Chen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## PLEASE CHECK "Allow edits from maintainers" 2 | 3 | ![help](https://help.github.com/assets/images/help/pull_requests/allow-maintainers-to-make-edits.png) 4 | 5 | ## FOLLOW "Conventional Commits Specification" FOR ALL COMMITS 6 | 7 | https://conventionalcommits.org/ 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-prism 2 | > React.js + Prism.js syntax highlight component 3 | 4 | [![Version][npm-image]][npm-url] [![Travis CI][travis-image]][travis-url] [![Quality][codeclimate-image]][codeclimate-url] [![Coverage][codeclimate-coverage-image]][codeclimate-coverage-url] [![Dependencies][gemnasium-image]][gemnasium-url] [![Gitter][gitter-image]][gitter-url] 5 | 6 | 7 | ## Usage / Documentation 8 | 9 | ```sh 10 | npm i --save react-prism 11 | ``` 12 | 13 | Then, read the [documentation][docs]. 14 | 15 | 16 | ## Credits 17 | 18 | * [`prismjs`][prismjs] 19 | 20 | 21 | [npm-image]: https://img.shields.io/npm/v/react-prism.svg?style=flat-square 22 | [npm-url]: https://www.npmjs.org/package/react-prism 23 | 24 | [travis-image]: https://img.shields.io/travis/tomchentw/react-prism.svg?style=flat-square 25 | [travis-url]: https://travis-ci.org/tomchentw/react-prism 26 | [codeclimate-image]: https://img.shields.io/codeclimate/github/tomchentw/react-prism.svg?style=flat-square 27 | [codeclimate-url]: https://codeclimate.com/github/tomchentw/react-prism 28 | [codeclimate-coverage-image]: https://img.shields.io/codeclimate/coverage/github/tomchentw/react-prism.svg?style=flat-square 29 | [codeclimate-coverage-url]: https://codeclimate.com/github/tomchentw/react-prism 30 | [gemnasium-image]: https://img.shields.io/gemnasium/tomchentw/react-prism.svg?style=flat-square 31 | [gemnasium-url]: https://gemnasium.com/tomchentw/react-prism 32 | [gitter-image]: https://badges.gitter.im/Join%20Chat.svg 33 | [gitter-url]: https://gitter.im/tomchentw/react-prism?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge 34 | 35 | 36 | [docs]: https://tomchentw.github.io/react-prism/ 37 | [prismjs]: http://prismjs.com/ 38 | -------------------------------------------------------------------------------- /docs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tomchentw/react-prism/8297aaa11005365a2015be0ae1c689f5989bbd7e/docs/.gitkeep -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Prism Style Guide 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /lib/components/PrismCode.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true, 5 | }) 6 | 7 | var _createClass = (function() { 8 | function defineProperties(target, props) { 9 | for (var i = 0; i < props.length; i++) { 10 | var descriptor = props[i] 11 | descriptor.enumerable = descriptor.enumerable || false 12 | descriptor.configurable = true 13 | if ("value" in descriptor) descriptor.writable = true 14 | Object.defineProperty(target, descriptor.key, descriptor) 15 | } 16 | } 17 | return function(Constructor, protoProps, staticProps) { 18 | if (protoProps) defineProperties(Constructor.prototype, protoProps) 19 | if (staticProps) defineProperties(Constructor, staticProps) 20 | return Constructor 21 | } 22 | })() 23 | 24 | var _react = require("react") 25 | 26 | var _react2 = _interopRequireDefault(_react) 27 | 28 | var _propTypes = require("prop-types") 29 | 30 | function _interopRequireDefault(obj) { 31 | return obj && obj.__esModule ? obj : { default: obj } 32 | } 33 | 34 | function _classCallCheck(instance, Constructor) { 35 | if (!(instance instanceof Constructor)) { 36 | throw new TypeError("Cannot call a class as a function") 37 | } 38 | } 39 | 40 | function _possibleConstructorReturn(self, call) { 41 | if (!self) { 42 | throw new ReferenceError( 43 | "this hasn't been initialised - super() hasn't been called" 44 | ) 45 | } 46 | return call && (typeof call === "object" || typeof call === "function") 47 | ? call 48 | : self 49 | } 50 | 51 | function _inherits(subClass, superClass) { 52 | if (typeof superClass !== "function" && superClass !== null) { 53 | throw new TypeError( 54 | "Super expression must either be null or a function, not " + 55 | typeof superClass 56 | ) 57 | } 58 | subClass.prototype = Object.create(superClass && superClass.prototype, { 59 | constructor: { 60 | value: subClass, 61 | enumerable: false, 62 | writable: true, 63 | configurable: true, 64 | }, 65 | }) 66 | if (superClass) 67 | Object.setPrototypeOf 68 | ? Object.setPrototypeOf(subClass, superClass) 69 | : (subClass.__proto__ = superClass) 70 | } /* global Prism */ 71 | 72 | var PrismCode = (function(_PureComponent) { 73 | _inherits(PrismCode, _PureComponent) 74 | 75 | function PrismCode() { 76 | var _ref 77 | 78 | var _temp, _this, _ret 79 | 80 | _classCallCheck(this, PrismCode) 81 | 82 | for ( 83 | var _len = arguments.length, args = Array(_len), _key = 0; 84 | _key < _len; 85 | _key++ 86 | ) { 87 | args[_key] = arguments[_key] 88 | } 89 | 90 | return ( 91 | (_ret = ((_temp = ((_this = _possibleConstructorReturn( 92 | this, 93 | (_ref = 94 | PrismCode.__proto__ || Object.getPrototypeOf(PrismCode)).call.apply( 95 | _ref, 96 | [this].concat(args) 97 | ) 98 | )), 99 | _this)), 100 | (_this._handleRefMount = function(domNode) { 101 | _this._domNode = domNode 102 | }), 103 | _temp)), 104 | _possibleConstructorReturn(_this, _ret) 105 | ) 106 | } 107 | 108 | _createClass(PrismCode, [ 109 | { 110 | key: "componentDidMount", 111 | value: function componentDidMount() { 112 | this._hightlight() 113 | }, 114 | }, 115 | { 116 | key: "componentDidUpdate", 117 | value: function componentDidUpdate() { 118 | this._hightlight() 119 | }, 120 | }, 121 | { 122 | key: "_hightlight", 123 | value: function _hightlight() { 124 | Prism.highlightElement(this._domNode, this.props.async) 125 | }, 126 | }, 127 | { 128 | key: "render", 129 | value: function render() { 130 | var _props = this.props, 131 | className = _props.className, 132 | Wrapper = _props.component, 133 | children = _props.children 134 | 135 | return _react2.default.createElement( 136 | Wrapper, 137 | { ref: this._handleRefMount, className: className }, 138 | children 139 | ) 140 | }, 141 | }, 142 | ]) 143 | 144 | return PrismCode 145 | })(_react.PureComponent) 146 | 147 | PrismCode.propTypes = { 148 | async: _propTypes.PropTypes.bool, 149 | className: _propTypes.PropTypes.string, 150 | children: _propTypes.PropTypes.any, 151 | component: _propTypes.PropTypes.node, 152 | } 153 | PrismCode.defaultProps = { 154 | component: "code", 155 | } 156 | exports.default = PrismCode 157 | -------------------------------------------------------------------------------- /lib/components/PrismCode.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _react = require("react"); 4 | 5 | var _react2 = _interopRequireDefault(_react); 6 | 7 | var _reactDom = require("react-dom"); 8 | 9 | var _reactDom2 = _interopRequireDefault(_reactDom); 10 | 11 | var _prismjs = require("prismjs"); 12 | 13 | var _prismjs2 = _interopRequireDefault(_prismjs); 14 | 15 | var _PrismCode = require("./PrismCode"); 16 | 17 | var _PrismCode2 = _interopRequireDefault(_PrismCode); 18 | 19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 20 | 21 | describe("PrismCode", function () { 22 | beforeAll(function () { 23 | global.Prism = _prismjs2.default; 24 | }); 25 | 26 | afterAll(function () { 27 | delete global.Prism; 28 | }); 29 | 30 | var dom = void 0; 31 | 32 | beforeEach(function () { 33 | dom = document.createElement("div"); 34 | }); 35 | 36 | afterEach(function () { 37 | _reactDom2.default.unmountComponentAtNode(dom); 38 | }); 39 | 40 | it("should render original code in the first run", function () { 41 | _reactDom2.default.render(_react2.default.createElement( 42 | _PrismCode2.default, 43 | { className: "language-javascript" }, 44 | "require(\"react/addons\").addons.TestUtils.renderIntoDocument(/* wtf ?*/);" 45 | ), dom); 46 | 47 | expect(dom.textContent).toEqual("require(\"react/addons\").addons.TestUtils.renderIntoDocument(/* wtf ?*/);"); 48 | }); 49 | 50 | it("should render hightlighted code in the second run", function () { 51 | _reactDom2.default.render(_react2.default.createElement( 52 | _PrismCode2.default, 53 | { className: "language-javascript" }, 54 | "var React, TestUtils;" 55 | ), dom); 56 | 57 | // FIXME: exact content here 58 | expect(dom.textContent).not.toEqual("require(\"react/addons\").addons.TestUtils.renderIntoDocument(/* wtf ?*/);"); 59 | }); 60 | }); -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _PrismCode = require("./components/PrismCode"); 8 | 9 | Object.defineProperty(exports, "PrismCode", { 10 | enumerable: true, 11 | get: function get() { 12 | return _interopRequireDefault(_PrismCode).default; 13 | } 14 | }); 15 | Object.defineProperty(exports, "default", { 16 | enumerable: true, 17 | get: function get() { 18 | return _interopRequireDefault(_PrismCode).default; 19 | } 20 | }); 21 | 22 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -------------------------------------------------------------------------------- /lib/index.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var _index = require("./index"); 4 | 5 | var _index2 = _interopRequireDefault(_index); 6 | 7 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 8 | 9 | describe("index", function () { 10 | it("should export components", function () { 11 | expect(_index2.default).toBeDefined(); 12 | expect(_index.PrismCode).toBeDefined(); 13 | }); 14 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-prism", 3 | "version": "4.3.2", 4 | "description": "React.js + prismjs syntax hightlight component", 5 | "main": "lib/index.js", 6 | "files": ["lib/", "src/", "CHANGELOG.md"], 7 | "lint-staged": { 8 | "*.{js,jsx,json,css}": ["prettier --write", "git add"] 9 | }, 10 | "scripts": { 11 | "precommit": "lint-staged", 12 | "styleguide": "styleguidist server", 13 | "styleguide:build": "styleguidist build", 14 | "test": "react-scripts test --env=jsdom", 15 | "pretest": "npm run lint", 16 | "test:once": "cross-env CI=true npm test", 17 | "clean": "rimraf lib", 18 | "lint": "cross-env NODE_ENV=test eslint .", 19 | "prebuild:lib": "npm run lint && npm run clean", 20 | "build:lib": 21 | "cross-env NODE_ENV=production babel src/ --out-dir lib/ --ignore spec.js", 22 | "precommit:lib": "npm run build:lib", 23 | "commit:lib": 24 | "git add -A && git commit -m 'chore(lib): compile from src with `babel`'", 25 | "precommit:docs": "npm run styleguide:build", 26 | "commit:docs": 27 | "git add -A && git commit -m 'docs: compile from src with `styleguidist`'", 28 | "prerelease": "npm run commit:lib && npm run commit:docs", 29 | "release": 30 | "standard-version -m 'chore(release): %s \n\n* CHANGELOG: https://github.com/tomchentw/react-prism/blob/v%s/CHANGELOG.md'" 31 | }, 32 | "repository": { 33 | "type": "git", 34 | "url": "https://github.com/tomchentw/react-prism" 35 | }, 36 | "keywords": [ 37 | "React.js", 38 | "React", 39 | "react-component", 40 | "prismjs", 41 | "prism", 42 | "hightlight", 43 | "hightlight.js", 44 | "google code prettify", 45 | "prettify", 46 | "code prettify", 47 | "syntax", 48 | "syntax hightlight", 49 | "worker", 50 | "webworker" 51 | ], 52 | "author": { 53 | "name": "tomchentw", 54 | "email": "developer@tomchentw.com", 55 | "url": "https://github.com/tomchentw" 56 | }, 57 | "license": "MIT", 58 | "bugs": { 59 | "url": "https://github.com/tomchentw/react-prism/issues" 60 | }, 61 | "homepage": "https://tomchentw.github.io/react-prism/", 62 | "devDependencies": { 63 | "babel-cli": "^6.26.0", 64 | "babel-core": "^6.26.0", 65 | "babel-eslint": "^8.0.0", 66 | "babel-plugin-transform-flow-comments": "^6.8.0", 67 | "babel-plugin-typecheck": "^3.9.0", 68 | "babel-preset-env": "^1.5.2", 69 | "babel-preset-react": "^6.24.1", 70 | "babel-preset-stage-0": "^6.24.1", 71 | "codeclimate-test-reporter": "^0.5.0", 72 | "cross-env": "^5.0.5", 73 | "eslint": "^4.6.1", 74 | "eslint-config-prettier": "^2.4.0", 75 | "eslint-plugin-prettier": "^2.2.0", 76 | "husky": "^0.14.3", 77 | "lint-staged": "^6.0.0", 78 | "prettier": "^1.6.1", 79 | "prismjs": "^1.7.0", 80 | "react": "^16.2.0", 81 | "react-dom": "^16.2.0", 82 | "react-scripts": "^1.0.13", 83 | "react-styleguidist": "^6.0.24", 84 | "rimraf": "^2.6.2", 85 | "standard-version": "^4.3.0-candidate.0" 86 | }, 87 | "peerDependencies": { 88 | "prop-types": "^15.5.0", 89 | "react": "^15.5.0 || ^16.0.0" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tomchentw/react-prism/8297aaa11005365a2015be0ae1c689f5989bbd7e/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Prism | tomchentw 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/components/PrismCode.js: -------------------------------------------------------------------------------- 1 | /* global Prism */ 2 | 3 | import React, { PureComponent } from "react" 4 | 5 | import { PropTypes } from "prop-types" 6 | 7 | export default class PrismCode extends PureComponent { 8 | static propTypes = { 9 | async: PropTypes.bool, 10 | className: PropTypes.string, 11 | children: PropTypes.any, 12 | component: PropTypes.node, 13 | } 14 | 15 | static defaultProps = { 16 | component: `code`, 17 | } 18 | 19 | componentDidMount() { 20 | this._hightlight() 21 | } 22 | 23 | componentDidUpdate() { 24 | this._hightlight() 25 | } 26 | 27 | _hightlight() { 28 | Prism.highlightElement(this._domNode, this.props.async) 29 | } 30 | 31 | _handleRefMount = domNode => { 32 | this._domNode = domNode 33 | } 34 | 35 | render() { 36 | const { className, component: Wrapper, children } = this.props 37 | 38 | return ( 39 | 40 | {children} 41 | 42 | ) 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/PrismCode.md: -------------------------------------------------------------------------------- 1 | Put your code inside `` component, and it will highlight it and wraps it into a `` component: 2 | 3 | 4 | ``` 5 | require('prismjs'); 6 | require('prismjs/themes/prism.css'); 7 | 8 | 9 | {` 10 | const id = x => x 11 | `} 12 | 13 | ``` 14 | // or a `
` component:
15 | 
16 | ```
17 | 
18 | {`
19 |   const id = x => x
20 | `}
21 | 
22 | ```
23 | 
24 | **`react-prism` depends on the existence of `globals.Prism` object.**
25 | 
26 | You'll either need to either:
27 | 
28 | - load it via `
61 |         
62 |         
63 |         Prism
64 |         
65 |         
66 |         
67 |         
68 |         
69 |       
70 |       
71 |     
72 | `}
73 | 
74 | ```
75 | 


--------------------------------------------------------------------------------
/src/components/PrismCode.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | import ReactDOM from "react-dom"
 4 | 
 5 | import Prism from "prismjs"
 6 | 
 7 | import PrismCode from "./PrismCode"
 8 | 
 9 | describe(`PrismCode`, () => {
10 |   beforeAll(() => {
11 |     global.Prism = Prism
12 |   })
13 | 
14 |   afterAll(() => {
15 |     delete global.Prism
16 |   })
17 | 
18 |   let dom
19 | 
20 |   beforeEach(() => {
21 |     dom = document.createElement(`div`)
22 |   })
23 | 
24 |   afterEach(() => {
25 |     ReactDOM.unmountComponentAtNode(dom)
26 |   })
27 | 
28 |   it(`should render original code in the first run`, () => {
29 |     ReactDOM.render(
30 |       
31 |         require("react/addons").addons.TestUtils.renderIntoDocument(/* wtf ?*/);
32 |       ,
33 |       dom
34 |     )
35 | 
36 |     expect(dom.textContent).toEqual(
37 |       `require("react/addons").addons.TestUtils.renderIntoDocument(/* wtf ?*/);`
38 |     )
39 |   })
40 | 
41 |   it(`should render hightlighted code in the second run`, () => {
42 |     ReactDOM.render(
43 |       
44 |         var React, TestUtils;
45 |       ,
46 |       dom
47 |     )
48 | 
49 |     // FIXME: exact content here
50 |     expect(dom.textContent).not.toEqual(
51 |       `require("react/addons").addons.TestUtils.renderIntoDocument(/* wtf ?*/);`
52 |     )
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as PrismCode } from "./components/PrismCode";
2 | 
3 | export { default } from "./components/PrismCode";
4 | 


--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
1 | import PrismCode, { PrismCode as NamedPrismCode } from "./index";
2 | 
3 | describe(`index`, () => {
4 |   it(`should export components`, () => {
5 |     expect(PrismCode).toBeDefined();
6 |     expect(NamedPrismCode).toBeDefined();
7 |   });
8 | });
9 | 


--------------------------------------------------------------------------------
/styleguide:
--------------------------------------------------------------------------------
1 | docs


--------------------------------------------------------------------------------