├── .babelrc ├── .eslintignore ├── .eslintrc.yml ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── prettier.config.js ├── src └── index.js └── test ├── example └── md-to-react.js ├── md-to-react.spec.js └── setup.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { 4 | "targets": { "electron": "3.0.14" }, 5 | "useBuiltIns": "usage", 6 | "debug": false, 7 | "corejs": 3 8 | }], 9 | "@babel/preset-react" 10 | ], 11 | "plugins": [ 12 | "@babel/plugin-proposal-object-rest-spread", 13 | "@babel/plugin-proposal-class-properties" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib 2 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | root: true 2 | extends: 3 | - plugin:react/recommended 4 | - prettier 5 | parser: babel-eslint 6 | settings: 7 | react: 8 | version: "0.16" 9 | env: 10 | browser: true 11 | es6: true 12 | mocha: true 13 | node: true 14 | globals: 15 | "$": true 16 | inkdrop: true 17 | rules: 18 | no-useless-escape: 0 19 | prefer-const: 2 20 | no-unused-vars: 21 | - 2 22 | - 23 | argsIgnorePattern: ^_ 24 | varsIgnorePattern: ^_ 25 | react/display-name: 0 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 12 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Takuya Matsuyama 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # remark-react-codemirror 2 | 3 | [![build status](https://secure.travis-ci.org/craftzdog/remark-react-codemirror.svg)](http://travis-ci.org/craftzdog/remark-react-codemirror) 4 | 5 | Syntax highlighting for [remark-react](https://github.com/mapbox/remark-react) through [CodeMirror](https://codemirror.net/). 6 | 7 | ## Usage 8 | 9 | ```javascript 10 | import remark from "remark"; 11 | import gfm from "remark-gfm"; 12 | import reactRenderer from "remark-react"; 13 | import sanitizeGhSchema from "hast-util-sanitize/lib/github.json"; 14 | 15 | import CodeMirror from "codemirror"; 16 | import "codemirror/mode/meta"; 17 | import "codemirror/addon/runmode/runmode"; 18 | import "codemirror/mode/javascript/javascript"; 19 | import highlighter from "remark-react-codemirror"; 20 | 21 | const schema = Object.assign({}, githubSchema, { 22 | attributes: Object.assign({}, githubSchema.attributes, { 23 | code: [...(githubSchema.attributes.code || []), "className"], 24 | }), 25 | }); 26 | 27 | remark() 28 | .use(gfm) 29 | .use(reactRenderer, { 30 | sanitize: schema, 31 | remarkReactComponents: { 32 | code: highlighter(CodeMirror, { theme: "solarized" }), 33 | }, 34 | }) 35 | .processSync(readme).result; 36 | ``` 37 | 38 | ### Notes 39 | 40 | - The default santization schema (GitHub's) excludes `className`, but we want those `cm-*` classes for our highlighting! Hence the custom object passed to `santization`. 41 | - You'll need stylings for the classes that [CodeMirror](https://github.com/codemirror/CodeMirror) adds. You can choose from a bunch bunch of pre-made [stylesheets](https://github.com/codemirror/CodeMirror/tree/master/theme). 42 | 43 | ## License 44 | 45 | MIT. Developed by Takuya Matsuyama 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "remark-react-codemirror", 3 | "version": "1.1.3", 4 | "description": "Syntax highlighting for remark-react through CodeMirror", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "build": "babel src -d lib", 8 | "watch": "babel src --watch -d lib", 9 | "lint": "eslint src --ext .js", 10 | "format": "prettier -w src", 11 | "test": "npm run lint && mocha --require @babel/register --require test/setup.js", 12 | "prepublish": "npm test; npm run build" 13 | }, 14 | "keywords": [ 15 | "remark", 16 | "react", 17 | "codemirror", 18 | "syntax", 19 | "highlight" 20 | ], 21 | "author": "Takuya Matsuyama ", 22 | "license": "MIT", 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/craftzdog/remark-react-codemirror.git" 26 | }, 27 | "devDependencies": { 28 | "@babel/cli": "^7.14.8", 29 | "@babel/core": "^7.15.0", 30 | "@babel/plugin-proposal-class-properties": "^7.14.5", 31 | "@babel/plugin-proposal-object-rest-spread": "^7.14.7", 32 | "@babel/preset-env": "^7.15.0", 33 | "@babel/preset-react": "^7.14.5", 34 | "@babel/register": "^7.15.3", 35 | "babel-eslint": "^10.1.0", 36 | "codemirror": "^5.59.1", 37 | "deepmerge": "^4.2.2", 38 | "eslint": "^7.32.0", 39 | "eslint-config-prettier": "^8.3.0", 40 | "eslint-plugin-react": "^7.24.0", 41 | "jsdom": "^20.0.0", 42 | "mocha": "^8.2.1", 43 | "prettier": "^2.3.2", 44 | "prop-types": "^15.7.2", 45 | "react": "^17", 46 | "react-dom": "^17", 47 | "react-test-renderer": "^17.0.1", 48 | "remark": "^13.0.0", 49 | "remark-gfm": "^1.0.0", 50 | "remark-react": "^8.0.0" 51 | }, 52 | "dependencies": { 53 | "react-codemirror-runmode": "^1.0.5" 54 | }, 55 | "peerDependencies": { 56 | "prop-types": ">= 15.6.0", 57 | "react": ">= 0.11.2" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | const options = { 2 | arrowParens: 'avoid', 3 | singleQuote: true, 4 | bracketSpacing: true, 5 | endOfLine: 'lf', 6 | semi: false, 7 | tabWidth: 2, 8 | trailingComma: 'none' 9 | } 10 | 11 | module.exports = options 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Highlighter from 'react-codemirror-runmode' 4 | 5 | export default function (CodeMirror, opts = {}) { 6 | opts = { theme: 'default', ...opts } 7 | class Code extends React.Component { 8 | static propTypes = { 9 | className: PropTypes.string, 10 | lang: PropTypes.string, 11 | children: PropTypes.node 12 | } 13 | 14 | render() { 15 | const { className, children, lang } = this.props 16 | const language = lang || (className.match(/language-([^ ]*).*$/) || [])[1] 17 | const value = children[0] || '' 18 | const props = { 19 | value, 20 | inline: true, 21 | language, 22 | theme: opts.theme, 23 | codeMirror: CodeMirror 24 | } 25 | 26 | return 27 | } 28 | } 29 | 30 | return Code 31 | } 32 | -------------------------------------------------------------------------------- /test/example/md-to-react.js: -------------------------------------------------------------------------------- 1 | import remark from 'remark' 2 | import gfm from 'remark-gfm' 3 | import reactRenderer from 'remark-react' 4 | 5 | import merge from 'deepmerge' 6 | import sanitizeGhSchema from 'hast-util-sanitize/lib/github.json' 7 | 8 | import CodeMirror from 'codemirror' 9 | import 'codemirror/addon/runmode/runmode' 10 | import 'codemirror/mode/meta' 11 | import 'codemirror/mode/javascript/javascript' 12 | import highlighter from '../../lib' 13 | 14 | const mdToReact = (markdown) => { 15 | const schema = merge(sanitizeGhSchema, { 16 | attributes: { code: ['className'] } 17 | }) 18 | 19 | return remark() 20 | .use(gfm) 21 | .use(reactRenderer, { 22 | sanitize: schema, 23 | remarkReactComponents: { 24 | code: highlighter(CodeMirror) 25 | } 26 | }) 27 | .processSync(markdown).result 28 | } 29 | 30 | export default mdToReact 31 | -------------------------------------------------------------------------------- /test/md-to-react.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react' // eslint-disable-line no-unused-vars 2 | import { mount } from 'enzyme' 3 | import assert from 'assert' 4 | 5 | import mdToReact from './example/md-to-react' 6 | 7 | describe('highlight', () => { 8 | it('render code block element using CodeMirror', () => { 9 | const codeBlockText = 'function blah(arg1) {};' 10 | const inputMarkdown = ` 11 | \`\`\`js 12 | ${codeBlockText} 13 | \`\`\` 14 | ` 15 | const actual = mdToReact(inputMarkdown) 16 | const wrapper = mount(actual) 17 | assert.ok(wrapper.find('code').hasClass('cm-s-default')) 18 | assert.equal(wrapper.find('code > span').length, 8) 19 | assert.ok(wrapper.find('code > span').first().hasClass('cm-keyword')) 20 | }) 21 | }) 22 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | import { JSDOM } from 'jsdom' 2 | import Enzyme from 'enzyme' 3 | import Adapter from 'enzyme-adapter-react-16' 4 | 5 | Enzyme.configure({ adapter: new Adapter() }) 6 | 7 | const { window } = new JSDOM('', { 8 | url: 'http://localhost' 9 | }) 10 | global.window = window 11 | global.document = window.document 12 | Object.keys(global.window).forEach((property) => { 13 | if (typeof global[property] === 'undefined') { 14 | global[property] = document.defaultView[property] 15 | } 16 | }) 17 | 18 | global.navigator = { 19 | userAgent: 'node.js' 20 | } 21 | --------------------------------------------------------------------------------