Заставьте код в Markdown работать в режиме реального времени

внешний интерфейс React.js Markdown Babel

задний план

Пусть код в Markdown работает в реальном времени, зачем такая необходимость?

В нашей команде разработчиков технические документы написаны в Markdown, и документы часто сопровождаются большим количеством примеров кода Мы надеемся, что когда вы прочитаете документ, вы сможете запустить пример кода и увидеть результат.

нужно

  • Запустите код в Markdown и просмотрите эффект.
  • Код можно редактировать онлайн.
  • Не влияет на компоновку всего документооборота.
  • Поддержка React, поддержка подсветки кода.
  • Бабель можно настроить.

После уточнения требований я написал компонент React для выполнения этих функций,react-code-view, сначала посмотрите на эффект:

preview

онлайн просмотр:Саймон Овер.GitHub.IO/реагировать-код-…

принцип

  • просто пройтиmarkdown-loaderа такжеhtml-loaderРазбирать документы Markdown.
  • Выньте код с помощью регулярного выражения и отдайте егоcodemirror
  • ПучокcodemirrorКод в babel компилируется babel, а затем визуализируется в указанный контейнер с помощью ReactDOM.render.

Установить

npm install react-code-view

настроить веб-пакет

В webpack вам нужно добавить паруmarkdown-loaderслужба поддержки. Необходимо установить:

npm install html-loader --save-dev
npm install markdown-loader --save-dev
npm install react-markdown-reader --save-dev

webpack.config.jsнастроить

>=webpack 2.x +


const markdownRenderer = require('react-markdown-reader').renderer;

{
  test: /\.md$/,
  use: [{
    loader: 'html-loader'
  }, {
    loader: 'markdown-loader',
    options: {
      pedantic: true,
      renderer: markdownRenderer(/**languages:Array<string>**/)
    }
  }]
}

языки По умолчанию:["javascript", "bash", "xml", "css", "markdown", "less"];

Github: GitHub.com/Simon over/hot…

Добавить Бабель

Пример кода обычно использует ES2015+, React и т. д. Код нужно компилировать в реальном времени, поэтому babel представлен в html:

<script type="text/javascript" src="//cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"></script>

Пример


import CodeView from 'react-code-view';
import '~react-code-view/lib/less/index.less';

import { Button } from 'rsuite';


<CodeView dependencies={{ Button }} >
  {require('./example.md')}
</CodeView>

Исходный код написан в уценке, см.:example.md

Здесь следует отметить, что код, который необходимо запустить, должен быть помещен в<!--start-code-->а также<!--end-code-->между.

API

Name Type Default value Description
dependencies Object зависимые компоненты
showCode boolean true показать код
babelTransformOptions Object { presets: ['stage-0', 'react', 'es2015'] } параметры конфигурации бабеляoptions

Кто его использует?

Категории