Встречайте mdx и mdx-deck | Кодементор

Допустим, вам нужно создать презентацию

Какие у вас есть варианты? Keynote, Power Point или Google Slide могут быть очевидным выбором. Допустим, вам нужно создать презентацию а также ты гик. Какие варианты у вас есть сейчас?

Познакомьтесь с мдкс

MDX это библиотека, которая позволяет вам писать JSX код внутри Уценка файлы. Если вы не использовали JSX до сих пор думайте об этом как о расширении XML для EcmaScript (также известного как JavaScript) — найдите примеры в ссылке JSX. Если вы когда-либо писали компонент React, вы писали JSX.

Markdown является одним из инструментов, однажды воспользовавшись которым, вы не можете представить свою жизнь без него. Его создали два замечательных человека: Джон Грубер — известный технический писатель, и Аарон Шварц — соучредитель Reddit. Markdown давайте писать форматированные документы с очень чистым синтаксисом. Mdx — популярный проект на Github с более чем 6 тысячами звезд.

Встречайте mdx-колоду

Один из проектов на основе mdx является mdx-палуба что подводит нас к основной теме этого поста: созданию вызывающий презентация.

Чтобы начать с mdx-deck тебе нужно node а также npm, который вы, возможно, уже установили. Для запуска требуется 2 минуты:

1. создайте новый каталог и запустите npm init -y
2. бежать npm i -S mdx-deck
3. создать новый файл с именем deck.mdx содержащий

# Hello World
---
## This is the second slide

4. добавить новую команду скрипта в package.json

"start": "mdx-deck deck.mdx"

5. бежать npm start и вы увидите новую презентацию в браузере.

Это может показаться не таким уж большим, но у вас есть 2 слайда. Вы можете увидеть их в браузере и добавить еще один ОЧЕНЬ просто. Просто добавьте 3 тире --- на новой строке, и у вас будет новый слайд. И это еще не все, войдите в режим докладчика, нажав alt + p и обзорный режим, нажав alt + o.
Кстати, # означает h1 и ## означает h2 в уценке. Уценка не так страшна!

Тематика

Добавим немного цвета. Одна первая линия deck.mdx добавьте эту строку, за которой следует пустая строка.

export { yellow as theme } from 'mdx-deck/themes'

Вы только что сменили тему, проверьте браузер. yellow один из темы по умолчанию предоставлено mdx-deck. Конечно, вы можете определить свою собственную тему. Я забыл упомянуть, используйте клавиши со стрелками или нажмите на левый / правый край, чтобы изменить слайд. Или вы можете использовать клавишу пробела, чтобы перейти к следующему слайду.

Встраивайте компоненты React

Достаточно круто? Самое лучшее еще впереди! Вы можете добавить компоненты React внутрь презентации. Итак, допустим, у вас есть этот компонент:

import React from 'react'

export default ({ name }) => {
  return (
    <span>{ 'Hi ' + name }</span>
  );
}

Вы можете легко использовать этот компонент в своей презентации следующим образом:

export { yellow as theme } from 'mdx-deck/themes'

# Hello World
---
## This is the second slide
---
## Embed React components
import Hi from './Hi'

<Hi name="Peter" />

Ваш компонент может быть более сложным, если вы хотите. Например, я добавил этот компонент гистограммы:

import React from 'react'
import ReactChartkick, { BarChart } from 'react-chartkick'
import Chart from 'chart.js'

ReactChartkick.addAdapter(Chart)

const data = [
  [ 'React', 8 ],
  [ 'React Native', 9 ],
  [ 'Node', 8 ],
  [ 'Linux', 7 ],
  [ 'MySQL', 7 ],
  [ 'Mongo', 7 ],
  [ 'Elasticsearch', 6 ],
  [ 'Docker', 5 ],
]

export default () => {
  return (
    <div style={{ width: 700 }}>
      <BarChart
        data={data}
        colors={["#C32148"]}
      />
    </div>
  );
}

Вот как это выглядит:

Ярлык «React Native 9» появился, когда я навел курсор на панель React Native. Таким образом, вы можете взаимодействовать с компонентами React, которые вы встраиваете в свою презентацию.

Фрагменты кода

Добавлять фрагменты кода также легко:

---
## Code Snippet
.```jsx
export default () => {
  return (
    <div>
    <BarChart
      data={data}
      colors={["#C32148"]}
    />
    </div>
  );
}
.```
---

Примечание: я поставил точку перед тремя обратными кавычками, чтобы избежать форматирования фрагмента кода, используемого этой платформой. Вам не нужно добавлять его в сценарии реальной жизни.

И они тоже неплохо выглядят!

Другие особенности

Стоит упомянуть и другие интересные функции: разделенный вид (горизонтальный и вертикальный), поддержка таблиц, поддержка изображений, макетов и многое другое.

Чтобы превратить вашу презентацию в HTML + CSS + JS бежать mdx-deck build deck.mdx так что вы можете развернуть результат, если это необходимо.

Здесь вы можете найти презентацию, которую я немного построил. Надеюсь, вам понравилось это, и, возможно, в следующий раз вы создадите презентацию mdx-deck будет один вариант!

Код включен!