Gatsby: Markdown 소스에서 React 구성 요소 사용

좋은 생각입니다. 아직 사용할 수 없다면 기꺼이 작업 할 것입니다.

나는 reactdown의 개발자입니다. Reactdown이 Gatsby와 함께 작동하는 것을 보는 것은 멋질 것입니다. 통합과 관련하여 질문이 있거나 도움이 필요하면 저에게 Ping하십시오.

👍 이것은 일반적인 요청이므로 널리 사용 가능한 작업을 수행하는 것이 좋습니다!

나는 개츠비와 함께 작업하는 reactdown을 얻는 방법에 대한 빠르고 더러운 예제 저장소를 설정했습니다. 내부적으로 Gatsby는 웹팩 위에있는 매우 사용자 친화적 인 래퍼 일 뿐이므로 모든 기능이 여전히 모든 작업을 수행 할 수 있습니다.

https://github.com/benstepp/gatsby-reactdown

감사합니다. 시도해보고 어떻게되었는지 알려 드리겠습니다.

오 멋지다! 좋은 벤. 제가 이미징했던 것보다 설정이 훨씬 간단합니다.
ㅋ. 잘 했어요 안드레이.

2016 년 6 월 7 일 화요일 오후 10:31 Jo Meenen [email protected] 은 다음과 같이 썼습니다.

감사합니다. 시도해보고 어떻게되었는지 알려 드리겠습니다.

—
댓글을 달았 기 때문에 수신 한 것입니다.

이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -224492088,
또는 스레드 음소거
https://github.com/notifications/unsubscribe/AAEVh-2doZe_FXFMBxYTJ5FAVqo4XqxNks5qJlO6gaJpZM4Iubim
.

@benstepp 좋네요! 이것은 래퍼를 통해 Markdown 파일을 사용할 때 충분히 간단 해 보이지만 React 구성 요소 내부에서 사용할 마크 다운 파일을 가져올 때도 작동합니까?

편집 : 상자에서 바로 작동해야하는 것처럼 보이지만 md 파일이 변환 된 React 구성 요소는 아무 것도 출력하지 않습니다.

저는 새로운 GraphQL 레이어 (# 420)가 열리는 다른 접근 방식에 대해 생각하고 있습니다. mdash repo https://github.com/wooorm/mdast/issues/13 에서 그것에 대해 묻는 문제를 열었습니다.

굉장 할 것입니다! 나는 내가 Reactdown과 너무 가까워 졌다고 느꼈다 ... markdown 파일은 webpack에 의해 React 구성 요소로 적절하게 변환되지만 (적어도 그럴 것 같음) 내 코드에서 사용할 때 빈 구성 요소 만 제공됩니다.

@SachaG 어딘가에 내가 볼 수있는 저장소가 있습니까?

와, 정말 이상 해요. 문제를 재현하려고했는데 이제 작동합니다! 뭐가 바뀌 었는지 모르겠네요… 불평 할 수 없네요 :)

React의 신들은 황금 전차를 타고 내려 왔습니다. 코드가 작동했습니다.

@SachaG reactdown 이 런타임을 참조하는 방법에 몇 가지 문제가

안녕하세요! 이것에 대한 최근 업데이트가 있습니까? 마크 다운에서 반응 구성 요소를 사용하는 권장 방법은 무엇입니까? 내가 따를 수있는 예가 있습니까? 감사!

아직 :-( 어떻게 할 것인지에 대한 좋은 계획이 있습니다. 기본적으로 마크 다운 파일을 React 컴포넌트 파일로 컴파일합니다. 여기서 참조 된 모든 React 컴포넌트를 올바르게 가져 오지만 아직 빌드 할 필요는 없습니다. 필요한 경우 작업을 시작하십시오!

@KyleAMathews 내 마크 다운 파일에서 변환기 스크립트를 실행 한 다음 변환 단계에서 생성 된 출력 파일에 필요한 다른 반응 구성 요소를 수동으로 추가해야한다는 뜻입니까? 이 작업이 완료되면 최종 빌드를 수행합니까?

이상적으로는 이러한 단계를 수행하는 Gatsby v1 용 플러그인입니다.
자동으로.

2017 년 5 월 2 일 화요일 오후 12:50 Piyush Singh [email protected] 은 다음과 같이 썼습니다.

@KyleAMathews https://github.com/KyleAMathews 실행해야한다는 뜻 인가요?
내 마크 다운 파일에 변환기 스크립트를 추가 한 다음 다른 반응을 추가합니다.
변환 단계에서 생성 된 출력 파일에 필요한 구성 요소? 한번
이것이 완료되면 최종 빌드를 수행합니까?

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.

이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment-298741837 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AAEVh4riB8uXgeRUybcR6OxsC1EAKnkKks5r14kPgaJpZM4Iubim
.

내가 의미하는 바의 간단한 예입니다.

/my-blog/index.md에 다음과 같은 마크 다운 파일이 있다고 상상해보십시오.

---
title: "hi folks"
---

# This is my broomstick

Yo yo foo

<SweetComponent props="super cool" />

그런 다음 본문은 webpack / babel / etc를 통해 실행되는 반응 구성 요소로 변환 될 수 있습니다. 정상적으로.

import React from 'react'
import SweetComponent from 'auto-resolve-this-somehow'

class MarkdownBody extends React.Component {
  render () {
    return (
      <div>
        <h1>This is my broomstick</h1>
        <p>Yo yo foo</p>
        <Sweet Component props="super cool" />
      </div>
    )
  }
}

트릭 부분은이를 Gatsby의 graphql 시스템과 통합하는 방법입니다. 이상적으로는 오늘날의 html을 쿼리 할 수있는 방법과 유사한 마크 다운 파일의 "구성 요소"버전 만 쿼리 할 수 ​​있습니다.

어쨌든, 그것은 내가 생각한 것에 대한 간략한 스케치입니다.

@KyleAMathews 감사합니다, 나는 지금 아이디어를 얻은 것 같아요.

내 목표는 같은 쓰기의 콘텐츠 할 수있을 것입니다 이 활용 MathJax, D3.js 시각화를 또한 가격 인하 소스에서 Three.js를 애니메이션 구성 요소를 통합 할 수 있습니다.

여기에 html 소스가 보이면 페이지는 일부 컨트롤 슬라이더에 jQuery를 사용하지만 React 구성 요소로 jQuery 작업을 수행하는 더 좋은 방법이 있다고 생각합니까?

지금까지 수집 한 내용을 보면 Gatsby 프레임 워크로 이러한 콘텐츠를 제작하는 것이 훨씬 깔끔하고 구조화 된 방식으로 달성 될 수 있다고 생각합니다. 맞습니까?

저는 웹 개발에 익숙하지 않지만 이러한 종류의 목표를 달성하는 데 기여할 수 있도록 Gatsby 시스템이 어떻게 작동하는지 배우기 위해 최선을 다하고 있습니다.

@KyleAMathews , 제안한 솔루션에 대해 생각하고 있습니다 ..

원하는 MD ​​JS 구성 요소 구조로의 변환을 수행하기 위해 markdown-it-jsx 와 같은 것을 사용하거나 개선 할 수 있다고 생각하십니까?

auto-resolve-this-somehow 부분을 ​​해결하기 위해 두 번째 파서가 MD JS 구성 요소 파일을 스캔하여 구성 요소 레지스트리 목록에있는 JSX와 일치하는 JSX를 찾을 수 있습니다 (단순한 텍스트 파일이거나 디렉토리에서 모든 구성 요소가 저장 됨) 파일 상단에 관련 가져 오기 행을 추가 하시겠습니까?

이 작업을 시작하여 모든 피드백이 굉장 할 것입니다!

이 작업을 수행하는 다른 프로젝트가 있습니다. 참고로 유용 할 수 있습니다. react-styleguidist . 마크 다운 파일의 예

마크 다운에서 구성 요소를 활성화 하면 Bret Victor

UPD : 그리고 또 하나의 예 : mdxc

그리고 또 다른 http://thejameskyle.com/react-markings.html

솔루션은 react-jsx-parser 있습니다.
howtographql.com에서 우리는 프로덕션에서 그것을 사용하고 있습니다 : https://github.com/howtographql/howtographql/blob/master/src/components/Tutorials/Markdown.tsx#L182

한 가지 단점 : dangerouslySetInnerHTML 사용하는 것보다 물론 느립니다.

1. HTML 구문 분석
2. 가상 DOM 트리를 구성합니다.
3. React로 가상 트리를 렌더링합니다.

속도를 높이는 한 가지 방법은 graphql 쿼리와 함께 원시 html을 보내지 않고 실제로 여기에 설명 된대로 Inferno.js 문서가 사용하는 형식을 보내는

현재 최적화의 마지막 단계를 수행 할 시간을 찾을 수 없기 때문에 이에 관심이있는 사람이라면 누구나이 방법을 사용할 수 있습니다.

그 의미는

1. GraphQL 유형은 재귀적일 수 있고 트리를 나타낼 수 있으므로 문제가되지 않는 적절한 GraphQL 유형을 구성합니다.
2. remark 마크 다운 파싱 비즈니스가 완료된 후 직렬화 된 jsx 형식을 생성합니다.
3. React에서이 형식을 역 직렬화하십시오.

내가 주목해온 또 다른 옵션은 https://github.com/mapbox/jsxtreme-markdown입니다.

비슷한 패턴을 사용할 수 있습니다. 마크 다운을 JSX 컴포넌트로 변환하기 만하면됩니다. 사용자 정의 구분 기호를 사용하여 JavaScript 및 JSX를 추가하십시오. 기존 Remark 설정을 잘 사용할 수 있습니다. 그리고 정상적인 React 페이지이기 때문에 성능 저하가 많지 않습니다.

https://github.com/cerebral/marksy 도 있는데 최근에 좋은 효과를 내기 위해 사용했습니다.

Gatsby의 맥락에서 이에 대한 권장 접근 방식이 있습니까? 아니면 아직 결정해야합니까?

안녕하세요, 개츠비 마크 다운 파일에 세관 구성 요소를 포함하라는 권장 사항이 있습니까?

컬렉션에 대한 추가 옵션 https://idyll-lang.github.io/

그 사용 사례에 대해 marky 가 잘 작동하는 것

반응 요소 트리를 반환 할 때 어떻게이를 개츠비 플러그인에 통합 할 수 있는지 궁금합니다.

@KyleAMathews @revolunet 사용자 지정 요소로 사용해야하는 구성 요소를 등록하는 것에 대해 어떻게 생각

이렇게하면 마크 다운을 리 액트 트리로 구문 분석하고 애플리케이션 성능을 유지할 필요가 없습니다.하지만 성능 비용이 발생할지 여부는 알 수 없습니다. 새 항목을 추가해야 할 때마다 ReactDOM.render 을 수행합니다. 사용자 정의 구성 요소이지만 여전히 블로그 게시물에 동적 기능을 추가하는 멋진 방법을 제공합니다.

@abdulhannanali 마크 다운에서 사용할 수있는 구성 요소를 등록하는 것은 좋은 생각이지만 사용자 지정 요소 항목은 서버 측에서 매우 친숙하게 들리지 않습니다. :)

그래서 저는 React와 Markdown을 거의 영원히 혼합하는 깨끗한 방법을 생각하고 있습니다. 아니면 적어도 개츠비 작업을 시작한 이후로.

그리고 마침내 나는 작동 할 수있는 아이디어가 있다고 생각합니다.

일반적인 HTML 요소와 React 구성 요소를 구분하는 데 동일한 규칙을 사용할 것입니다. 즉, React는 대문자로 표시됩니다.

따라서 Markdown에 직접 React 구성 요소를 포함 할 수 있습니다.

# Hi folks

I'm writing some markdown about speaker <Person id="Paul Ryan">Paul Ryan</Person> who's the speaker of the house and other stuff.

<InteractiveComponent invertedColors={true} allTheProps={true} />

그러면 다음과 같이 AST로 구문 분석됩니다.

[
  [{ raw: true, value: "<h1>Hi Folks</h1>" }],
  [
    { raw: true, value: "<p>I'm writing some markdown about speaker " },
    {
      raw: false,
      value: {
        name: "Person",
        props: { id: "Paul Ryan", children: "Paul Ryan" }
      }
    },
    { raw: true, value: " who's the speaker of the house and other stuff.</p>" }
  ],
  [
    {
      raw: false,
      value: {
        name: "InteractiveComponent",
        props: { invertedColors: true, allTheProps: true }
      }
    }
  ]
];

그런 다음 구성 요소에서 HTML을 직접 렌더링 (위험 스타일)하는 대신 다음과 같이 각 React 구성 요소에 대한 매핑과 함께 도우미 함수에 전달합니다.

import React from "react";
import renderHtmlReact from "gatsby-render-html-react";
import Person from "../components/Person";
import InteractiveComponent from "../components/InteractiveComponent";

export default ({ data }) => (
  <div>
    {renderHtmlReact({
      ast: data.markdownRemark.ast,
      componentMap: { Person, InteractiveComponent }
    })}
  </div>
);

// Your query goes down here

Remark와 함께 작동하는지 확인하려면 프로토 타이핑을 수행해야하지만 React "Html"이 그대로 전달 될 것이라고 확신합니다. 따라서 우리는 HTML을 분할하고 React JSX 부분을 데이터로 바꾸고 결과 "AST"를 렌더링하기위한 프런트 엔드 lib를 변환하는 파서가 필요합니다.

생각?

그런 다음 구성 요소에서 HTML을 직접 렌더링 (위험 스타일)하는 대신 다음과 같이 각 React 구성 요소에 대한 매핑과 함께 도우미 함수에 전달합니다.
[…]
생각?

이것은 우리가 해왔 던 일입니다 (매우 단순하고 실제로 안전하지 않으며 특정 태그에 대해서만 설계되었습니다). 우리의 사용 사례는 JSON 문서의 스타일 / 레이아웃이었습니다.

<IconGrid src="sensors.json" />

이것은 중복 된 콘텐츠를 피하는 데 정말 도움이되었으며 재사용 가능한 API 문서 구성 요소에 대해 유사한 메커니즘을 사용하는 것을 고려하고 있습니다.

이 솔루션이 결여하고 우리도 해결하지 못한 것은 컴포넌트 속성 내에서 마크 다운을 사용하는 것입니다. 따라서 다음과 같은 것이 가능할 수 있습니다.

<Api method="post" description="
An API which uses **markdown**.

And having multi line parameters would be helpful as well.
" />

이 공간에서 많은 것을 시도한 후 지금은 마크 다운 수준에서 실제로 해결되어야한다고 확신합니다. markdown flavor는 실제로 jsx / react를 이해해야 함을 의미합니다. 문제는 실제로 자바 스크립트 보간 jsx가 지원하고 마크 다운이 작동한다는 것입니다. Jsxtreme-markdown이 가까워지고 먼저 처리하고 나머지를 구문 분석하기 위해 markdown을 사용하여이 문제를 해결합니다. 또 다른 접근 방식은 html을 처리하는 MD ​​파서의 자연스러운 능력에 의지하는 것이므로 간단한 jsx (예를 들어 Marked는 대문자 요소를 처리합니다)하지만 문자열 전용 props에 갇혀 있고 중첩 된 markdown이없는 성가신 제한 (예 : Markdown inside , props.children). 다른 문제는 클라이언트의 수화가 성가신 bc를 얻습니다. 문자열을 반응 요소로 변환하기 위해 런타임 (일반적으로 상당히 큰 것)이 필요합니다. 이는 상호 작용 및 성능에 대한 빠른 시간에 대한 개츠비의 초점에 이상적이지 않습니다.

앞으로 가장 유망한 방법은 ast 기반 접근 방식이라고 생각하지만,이를 위해서는 상당한 프로젝트가되기 위해 기존의 것과 충분히 다른 마크 다운 변형 속도가 정말로 필요합니다.

내 2 센트 만 던져!

개츠비가 존재한다는 사실을 알기 전에 (2 년 전), jekyll ( rovr )과 유사하게 동작하는 반응 정적 사이트 생성기를 만드는 데

나는 마크 다운 콘텐츠 내에서 <CapitalizedComponents/> 를 찾기 위해 정규식 을 사용 표시 를 사용하고있었습니다.

또한 내 단순한 정규식은 구성 요소 끝 태그를 허용하지 않았으므로 자식이 없습니다 ... 그래서 이것은 작동하지 않았습니다.

<Component>
   <Child/>
</Component>

어쨌든 개츠비가 이것을 지원하게되어 정말 기쁩니다! 내 jekyll 사이트를 gatsby로 변환하는 중이며 거의 완료되었습니다. 내 다음 작업은 md 블로그 게시물 내에서 내 jekyll 포함을 내 gatsby 버전의 구성 요소로 변경하는 방법을 알아내는 것입니다.

@jquense 는 마크 다운에서 JS를 지원하지 않는 것이 제한 사항 dangerouslySetInnerHTML 에서 props.children dangerouslySetInnerHTML 됩니다.

100 % 솔루션은 아니지만 많은 설정에서 작동합니다. 나는 또한 마크 다운 안에 JS를 작성하는 아이디어를 좋아하지 않는다. 그런 식으로 모든 툴링 지원을 잃게됩니다.

@jakedeichert 예, 간단한 정규식은 지금까지만 진행됩니다. 이 작업과 비슷한 것을 얻었습니다! 그것은 개념을 검증합니다. 구조화 된 정보를 추출하기 위해 JSX를 이해하는 JS 파서를 사용하고 싶습니다. 이렇게하면 중첩 된 구성 요소를 지원할 수 있습니다.

@KyleAMathews 당신이 제안한 것에 대한 진전은 무엇입니까?

이것에 대한 몇 가지 생각 :

1. remark를 사용하여 임의의 반응 구성 요소 tmp-remark-jsx를 포함하는 마크 다운을 변환하는 작업 예제가 있습니다. remark-html 및 hast-util-to-html 를 기본 프로젝트로 사용했습니다.
   다음은 사용법 + 출력의 예입니다.
   관심이 있으시면 어떻게 작동하는지에 대한 추가 정보를 제공 할 수 있습니다.
2. MapBox는 remark를 사용하여 markdown을 react 요소로 변환하는 패키지

아무도 그것에 대해 일하기 시작하지 않았습니다.

이 두 가지 접근 방식의 문제점은 GraphQL 쿼리가 코드를 실행하지 않는 데이터 만 반환 할 수 있기 때문에 Gatsby의 GraphQL 기반 데이터 시스템에서 작동하지 않는다는 것입니다. 예를 들어 remark-react는 클라이언트에서 markdown => html 변환을 수행하여 이상적인 것보다 비용이 많이 드는 문제를 해결합니다.

따라서 GraphQL로 작업하려면 React 구성 요소를 생성하기위한 클라이언트 런타임이 필요합니다. 제 제안은 가능한 한 가장 작은 런타임을 가능하게하는 디자인을 통해 작업했습니다.

나는 지금 그것을 얻는 것 같아요. 따라서 귀하의 의견에 필요한 것은 두 가지 코드입니다.

1. markdown-> 반응 구성 요소를 지원하는 HAST를 사용할 준비가되었습니다. (이 코드는 빌드 타임에 실행되어야합니까?)
2. 반응 활성화 HAST-> 반응 요소 (최소 / 사소한 런타임으로 클라이언트 측에서 실행되어야 함)

내가 제대로 이해하고 있습니까? 내가 뭔가를 놓치고 있습니까?

예!

이 공간에서 다른 프로젝트를 발견했습니다. 몇 가지 흥미로운 아이디어가 있습니다. https://github.com/luiscarli/md-to-react

안녕하세요,

나는 그것을 또 찌르고있다. 여기 remark-custom-element-to-hast 에서 HAST를 만드는 첫 번째 부분의 작업 예제가 있습니다. 여전히 마크 다운을 자식 요소로 사용하고이를 사용하는 웹팩 로더를 지원해야합니다.

@KyleAMathews 접근 방식이 귀하의 견해와

두 번째 부분에서는 syntax-tree / hast-to-hyperscript를 사용할 수 있습니다. 다음은 wooorm / remark-vdom 사용의 예입니다.

@ fazouane-marouane 멋지다! 예, 훑어 보면 정말 가까워 보입니다. 훌륭한 일!

많은 의존성을 가지고 있고 런타임이 가능한 한 가벼워지기를 원하기 때문에 프론트 엔드에서는 hast-to-hyperscript를 사용하고 싶지 않습니다. 따라서 두 번째 라이브러리에서 모듈로 이동하십시오.

@KyleAMathews 그럼 대단해! 앞으로 며칠 안에 나머지 단계를 시도해 보겠습니다. 바라건대 이것은 우리가 실질적인 해결책에 더 가까이 다가 갈 수 있도록 해줄 것입니다.

안녕하세요 @ fazouane-marouane & @KyleAMathews , 저는 여러분의 토론을 읽고 제가 작업중인 이 앱 에서 여기에서 설명한 다양한 부분의 "간단한"버전을 구현했습니다.

흥미로운 부분은 개츠비 플러그인의 형태로 fazouane - 마루 앙 코드 @ 사용하는 사람입니다 여기에 우리가 HAST을 렌더링 부분 여기 . GraphQL 덕분에 HAST가 어떻게 검색되는지 보는 것도 흥미로울 수 있습니다.

이 댓글을 작성하는 시점에는 완벽하고 최적화되고 깨끗하지 않습니다.

편집 : 내 renderHAST 구성 요소는 현상이 클라이언트 측에서 렌더링 마크 다운을 처리하는 방식에서 크게 영감을 받았습니다. https://github.com/phenomic/phenomic/blob/master/packages/plugin-renderer-react/src /components/BodyRenderer.js

@pbellon 참여해 주셔서 감사합니다! 이렇게하면 모든 사람이 많은 시간을 절약 할 수 있습니다. 코드는 나머지 단계에 필요한 작업을 수행하는 것 같습니다. 오늘 저녁 늦게 해보겠습니다.

디버깅해야 할 한 가지는 구성 요소의 자식을 처리하는 방법입니다.
지금 마크 다운 This is a test <MyComponent>let's see how children are handled</MyComponent> 에서 쓰기를 설정하면 MyComponent 의 children 속성이 [0, null] 로 설정됩니다.

그러나 그것이 파서에서 온 것인지 HAST를 수화시키는 방식에서 온 것인지 확실하지 않습니다.

@pbellon 파서에서 나옵니다. 이 전체 반응을 마크 다운으로 프로토 타이핑하는 것은 미니멀 한 파서입니다. 모든 경우에 사용할 수 있도록 몇 가지 수정 사항이 확실히 필요합니다. 더 많은 예가 나오면 언제든지 문제 를 제출하십시오. 어쨌든 좋은 테스트 기반을 만드는 데 도움이 될 것입니다.

@ fazouane-marouane 알겠습니다. 이 기능을 구현할 수 있는지 확인하기 위해 귀하의 코드를 가지고 놀려고 노력할 것입니다 (그리고 그렇게 할 수 있다면 PR을 작성하십시오).하지만 사소한 수정처럼 보이지 않습니다 😮
여기 에 귀하의 저장소에 문제를 만들었습니다.

내 $ 0.02를 사용합니다. GitDocs 를 개발하는 과정에서 사용자가 마크 다운 파일에 JSX를 포함 할 수있는 방법이 필요했습니다. 여기 내가 지금까지 얻은 것입니다.

마크 다운 파싱

마크 다운 처리는 통합 , 발언 및 재 과대를 사용 합니다. 사용자 지정 토크 나이 저는 JSX를 감지하기 위해 추가 정규식이있는 비고 블록 HTML 토크 나이저 에서 분기되었습니다. 이 토크 나이저를 사용하면 rehype가 추가 처리를 위해 JSX 블록을 raw 로 감지 할 수 있습니다.

rehype-raw 와 유사하게 작동하지만 JSX 및 몇 가지 기본 표현식 평가를 지원하는 사용자 정의 rehype 플러그인 을 작성했습니다. 플러그인은 raw 노드를 찾고 acorn -jsx를 사용하여 블록 구문 분석을 시도하여 JSX인지 확인합니다. 구문 분석이 성공하면 acorn에서 생성 한 JSX AST가 HAST로 변환됩니다.

지원되는 JSX

지금까지 JSX의 다음 비트를 변환 할 수 있습니다 (테스트 스위트에서 가져온 예제 사례).

<Test>
  <Test2></Test2>
</Test>

<Test>some text</Test>

<Test attr={{ prop: 400 }} />

식

간단한 컴파일 시간 식 평가가 지원됩니다.

<Test attr={1 + 2}/>

생성 된 HAST 노드 속성해야합니다 'attr' 로 설정 3 .

배열 표현식

속성에서 Array.prototype.map() 이 허용됩니다.

<Test attr={ [1,2,3].map(x => 2 * x) } />

배열에 매핑하고 JSX 자식을 만들 수도 있습니다.

<Test>{ [1,2,3].map(x => (<Test2>{x}</Test2>)) }</Test>

HAST로 번역됩니다.

<Test>
  <Test2>1</Test2>
  <Test2>2</Test2>
  <Test2>3</Test2>
</Test>

한계

표현 지원은 매우 제한적이며 보안 검토를 거치지 않았습니다. 코드는 사용하지 않는 eval 와 같은 것들에 접근 window 가능하지 않아야하지만, 내가 어떤 보장을 할 수 없습니다.

이 영역에서 gatsby remark 플러그인을 정상적으로 사용할 수있는 실험을했습니다. react.js 코드를 생성하는 webpack 로더에 graphql html을 전달합니다. 불행히도 여러 가지 문제가 있으며 단일 프로덕션 빌드가 중단됩니다.

          createPage({
            path: edge.node.fields.slug,
            component: getCdResolve(blogPost, edge.node.fileAbsolutePath, {
              html: edge.node.html,
              site: result.data.site,
            }),
            context: {
              slug: edge.node.fields.slug,
            },
          })

cdResolve 는 !!cd-resolve-loader!foo.md 와 같은 문자열을 반환합니다. 개츠비는 그것을 좋아하지 않습니다. 적어도 개발 서버에서 작동합니다.

나머지 코드는 여기에 있습니다 .

빌드 출력은 자식을위한 정적 노드 집합이있는 간단한 구성 요소입니다.

var h = require('react').createElement;
var n1 = h('div', { key: 1, dangerouslySetInnerHTML: { __html: '<h1>Hello</h1>' } });
var n2 = h(CustomComponent, { key: 2, foo: 1 });

module.exports = () => h('div', null, [n1, n2]);

어, 흥미 롭군요!

이것은 불행히도 내가 말할 수있는 한 개발중인 마크 다운의 핫 리로딩을 깨뜨릴 것입니다.

네, 그것은 또 다른 문제였습니다. 문제가 어떻게 든 해결 되었다면 번들 크기와 상호 작용 시간에 관한 한 최고의 최종 결과 중 하나가 될 것이라고 생각합니다. 물론 작동하는 솔루션과는 거리가 멀다. Remark 작업 후 JS 파일로 컴파일하는 방법에 대한 팁이 있습니까?

@brigand 가장 쉬운 해결책은 이전 의견 https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -336681894에서 설명한 것입니다.

@KyleAMathews 제안한 솔루션에 대해 이제 remarkjs를 사용하여 jsx가 포함 된 마크 다운을 html AST 로 변환하는 방법을 알고 있습니다. 마지막 차단 버그를 해결했습니다. 이제 필요한 것은이 AST를 반응 구성 요소로 변환하고 npm으로 푸시 할 수있는 코드를 만드는 것입니다. 다음 주 말까지이 작업을 수행 할 수있는 여유 시간이 있습니다.

그때까지 뭔가를 밀지 않으면 야구 방망이를 들고 문앞에 나타나는 것을 망설이지 마십시오 😅.

@ r24y 이 작동했습니다! 그의 PR https://github.com/gatsbyjs/gatsby/pull/3732 및 using-remark 예제 사이트의 예제 페이지를 확인하십시오!

https://using-remark.gatsbyjs.org/custom-components/

그래서 여기에 내 진행 상황을보고합니다. 두 번째 단계를 마칠 시간이있었습니다.

대체로 두 가지 패키지가 있습니다.
HAST로 구문 분석 : @ dumpster / remark-custom-element-to-hast
반응 컴포넌트로의 사소한 렌더링 : @ dumpster / hast-react-renderer

@pbellon 은 여기에서 Gatsby 플러그인을 제안했습니다.

이 파이프 라인은 재 과장보다 관대해야합니다. 내 기억이 제대로 작동한다면 rehype는 <Note value="my content" /> 허용하지 않는 parser5를 사용하고 사용자 정의 요소에 대한 본문을 허용하는지 기억할 수 없습니다.

@KyleAMathews 여기에서 다음 단계가 무엇인지 모르겠습니다.

트윗 담아 가기

다음 단계는 리포지토리에 예제 사이트를 추가하여 우리가 여러분의 작업을 보여줄 수 있도록하는 것이라고 생각합니다. 그런 다음 gatsbyjs.org에서 문서 페이지를 가져 와서 그들이 가진 다양한 옵션과 절충점에 대해 이야기해야합니다.

달콤한! 설명해 주셔서 감사합니다.

나는 다음 주 또는 다음 주에 뭔가를 시도 할 것입니다 (이번 월요일에 새로운 일을 시작 😅).

차임. https://using-remark.gatsbyjs.org/custom-components/를 읽고 사용해 본 후, 마크 다운 내부에 구성 요소가있는 경우받는 validateDOMNesting 경고를 피하기 위해 gatsby-remark-component 라는 작은 패키지를 만들었습니다. 블록 수준 요소 (div ...)를 포함합니다. 사용자 지정 구성 요소는 기본적으로 단락으로 래핑되는 반면이 패키지에서는 div로 래핑됩니다.
사용하기 매우 쉽습니다.

//In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-component",
          options: { components: ["my-component", "other-component"] }
        }
      ]
    }
  }
]

누군가에게 유용하기를 바랍니다.

@Hebilicious 플러그인에 감사드립니다. 예, 모든 사용자 정의 구성 요소가 <p> 요소 내에서 렌더링되고 사용하고 있다는 것을 깨달았습니다.

<div>
  <custome-component></custom-component>
</div>

해결 방법으로.

그러나 마크 다운 템플릿 파일에서 이미했던 것처럼 모든 사용자 정의 구성 요소를 구성 파일에 다시 포함하는 것은 쉽지 않습니다.

@ li-xinyang 동의합니다. 수동으로 추가 할 필요가 없도록 자동 감지 기능을 추가했습니다.
시도하려면 패키지를 최신 버전 1.1.0 으로 업그레이드하십시오.
다음과 함께 즉시 작동합니다.

//In your gatsby-config.js ...
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["gatsby-remark-component"]
    }
  }
]

이 접선의 약간이지만, 여기 @rauchg와 조정에 관심이있을 수있는 사람들은 다음을 참조하십시오 제안을

@ r24y 멋지게 들립니다!

이 문제를 해결할 수있는 방법은 여러 가지가 있으며 서로 다른 장단점이 있다고 생각합니다.

React 구성 요소를 Markdown 에 Catalog 라는 프로젝트를 알고 있는지 모르겠습니다. 카탈로그의 개념을 적용하려는 gatsby-remark-design-system 이라는 Gatsby 플러그인도 있습니다.

이 솔루션은 완벽 해 보입니다 @arcticicestudio

카탈로그가 멋져 보입니다. 그리고 gatsby-remark-design-system 플러그인은 멋지지만 React 구성 요소를 지원하지 않습니다. 나는 그것이 옳은 일을한다고 생각하지만 기존 코드 블록 구문을 사용하여 Markdown에 더 복잡한 기능을 추가합니다.

이 스레드 내에서 몇 번 논의했듯이 기존 파서를 사용하는 것이 원하는 기능이 아니라고 생각합니다. 아마도 자유 플로팅 React 요소 대신 복잡한 React 구성 요소를 명시 적으로 더 명확하게 표시 할 수 있습니다. 예를 들어 마크 다운 파일은 다음과 같을 수 있습니다.

 # 일부 제목
 ... 기타 등등 ...

<Example>
   <Etc />
</Example>

포함 된 react 요소를 렌더링하려면 언어를 react 로 지정하면 JSX 인식 파서가 시작되어 rehype와 함께 사용할 수있는 유효한 AST를 생성합니다. 일반적인 JavaScript 프리즘 예제를 원한다면 일반적인 javascript 언어를 사용하십시오.

안녕하세요 여러분, 좋은 토론입니다.
gatsby-remark-component 하고 있으며 몇 가지 질문이 있습니다.

1. 구성 요소를 "자동 감지"하는 방법이 있습니까? 그러면 구성 요소 개체의 구성 요소에 명시 적으로 알릴 필요가 없습니다.

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: {

  },
}).Compiler

1. 일부 이미지를 gatsby-remark-images 와 통합하는 방법이 있습니까? 내 목표 중 하나는 사용자가 이미지를 추가하고 예를 들어 소품을 통해 내 구성 요소로 보낼 수 있다는 것입니다. 다음과 같은 것 :
   <my-component header-image="[](./image.png)"><my-component>

감사!

@ThiagoMiranda 네, (2) 좋을 것입니다! 내 사용 사례는 이미지 갤러리입니다.

<gallery>
  <item source="image1.jpg" caption="One"></item>
  <item source="image2.jpg" caption="Two"></item>
</gallery>

Zeit의이 JSX 인식 마크 다운 파서는 유망 해 보입니다 : https://github.com/mdx-js/mdx

MDX는 임베디드 JSX 및 가져 오기 / 내보내기 구문을 추가하는 CommonMark 사양의 상위 집합입니다.

발언과 과대 광고를 기반으로 구축되었으므로 개츠비 프로젝트 내에서 사용하기위한 대체품이 될 수 있습니다.

mdx 용 플러그인을 작성했습니다 : https://github.com/nhducit/gatsby-plugin-mdx

멋지다, 개츠비와 함께 해보고 싶었다 :)

@nhducit 의 mdx 플러그인을 사용하면 MDX 페이지를 연결하는 것이 매우 간단합니다 !!

1. pages/ 디렉토리의 mdx 및 소스에 대한 구성에 추가하십시오.

gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-mdx',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages/`,
      },
    },
  ],
}

1. 모든 마크 다운 파일을 쿼리하고 각 파일에 대한 페이지를 만듭니다.

gatsby-node.js

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    graphql(`
      { 
        allFile(filter:{extension:{eq:"md"}}) {
          edges {
            node {
              absolutePath
              relativeDirectory
              name
            }
          }
        }
      }
    `).then(result => {
      if (result.errors) {
        return reject(result.errors)
      }

      // Create markdown pages.
      result.data.allFile.edges.forEach(({ node: {
        absolutePath,
        relativeDirectory,
        name
       } }) => {
        createPage({
          path: `/${relativeDirectory}/${name}`,
          component: absolutePath
        })
      })
    })
    .then(resolve)
  })
}

1. MDX 사용 🎉

src/pages/my-markdown-page.md

import MyComponent from '../components/MyComponent'

# Title

_some content_

<MyComponent />

트윗 담아 가기 @nhducit 플러그인의 README에 귀하의 예제가 추가되는 것을 보면 좋을 것입니다.

@avigoldman PR은 환영합니다! 👍

@avigoldman 이 접근 방식이 frontmatter와 충돌하는 것처럼 보입니까?

@nhducit 홍보하겠습니다!

@lintonye 당신이 의미하는 바에 대해 조금 더 설명해

@lintonye mdx 내보내기를 사용해 https://github.com/mdx-js/mdx#exports

내가 틀렸다면 정정하십시오. 그러나 최신 webpack 버전이있는 Gatsby 2.0이 MDX에 remark 플러그인을 전달할 때까지 기다려야 할 것 같습니다.

cc @KyleAMathews

@avigoldman @nhducit 내보내기 구문을 사용하여 mdx 파일에서 데이터를 내보낼 때 구성 요소가 렌더링 될 때 UI에서 어떻게 액세스 할 수 있습니까?

현재 MDX에서 동일한 질문은 다음을 수행 할 수 없습니다.

• 마크 다운 페이지에 사용자 정의 스타일 적용
• 명명 된 mdx 내보내기에서 frontmatter 콘텐츠를 pathContext로 삽입
  이것은 실제로 수행 될 수 있지만 모든 .md 파일에 대해 .md 파일을 가져 오기 위해 .js 파일을 생성해야하므로 작업을 복제합니다.

@slorber 이 저장소에 꽤 해키 솔루션이 있습니다 : https://github.com/avigoldman/avigoldman.com

확실히 이상적이지 않습니다. Gatsby V2가 출시되면 이것을 다시 살펴볼 것입니다.

안녕하세요, 감사합니다 @avigoldman

나는 또한 여기에서 그것을 시도했다 https://github.com/nhducit/gatsby-plugin-mdx/issues/13#issuecomment -392334706

내보내기를 올바르게 추출 할 필요가없는 누락 된 부분을 찾은 것 같습니다. babel-plugin-config-export

블로그 게시물 페이지 당 하나의 레이아웃을 생성합니다.이 방식으로 수행해야하는지 또는 Remark를 사용하는 사람들이 일반적으로 하나의 레이아웃을 사용하므로 Gatsby의 성능에 어떤 영향을 미칠지 정확히 알 수 없습니다.

플러그인을 NPM에 게시하는 것은 어떻습니까? @nhducit이 frontmatter 에 대해 만든 것보다 더 유용 해 보입니다.

또한 ... mdx graphql 조각은 어디에서 왔습니까?

MDX에 대해 방금 사용자 정의 태그를 Gatsby와 통합하는 데 도움이 될 수있는 "MDXProvder"(React Context 기반)를 추가했습니다. cc @avigoldman

@slorber MDX 파일에 대해 쿼리 할 수 ​​있도록 gatsby-transformer-mdx 플러그인을 만들었습니다.

각 레이아웃을 페이지로, 각 MDX 파일을 콘텐츠로 취급하고 있습니다. 따라서 레이아웃이 페이지 컨텍스트를 가져온 다음 MDX가 드롭됩니다 (비고 생성 html에서 수행하는 것처럼).
특수 레이아웃 구성 요소가 사라지기 때문에 Gatsby V2에서는 작동하지 않습니다.

MDXProvider는 유망 해 보입니다!

여기에 2 ¢를 추가하면 @avigoldman의 gatsby-transformer-mdx 덕분에 mdx를 사용하여 Gatsby에 내 웹 사이트의 대부분을 해킹 할 수있었습니다 (저장소는 여전히 Jekyll을 사용하고 있으며 곧 새 저장소를 업데이트하거나 추가 할 예정입니다)!

훌륭합니다! 이번 주말 / 다음 주에 Gatsby V2와 잘 어울리는 패키지로 만들 시간이 있어야합니다.

@avigoldman gatsby-transformer-mdx에서 알아낼 수 html 필드 (문자열)를 사용합니다. 변환기는 무엇을 사용합니까? 웹팩 로더가 어디에도 필요하지 않은 경우 어떻게 작동합니까?

아, 방금 위의 설명을 읽었습니다. 트릭은 Gatsby v1이 레이아웃 구성 요소의 모든 것을 자동으로 래핑하므로 absolutePath 를 사용하여 MDX 파일을 대상으로합니다. 😃이 트릭에 감사드립니다!

@avigoldman Gatsby 2 플러그인에 대한 소식이 있습니까? Gatsby 2에 더 이상 존재하지 않는 레이아웃 구성 요소없이 어떻게 빌드할지 대략적인 방향을 제시 할 수 있다면 멋질 것입니다.
감사!

MDX의 export default 기능을 어떻게 든 사용할 수 있기를 바랐지만 children 이외의 추가 props를 전달하는 것은 가능한 ATM이 아닌 것 같습니다. mdx-js / mdx # 187

내 PR이 병합되면 (mdx-js / mdx # 189) 기존 gatsby-plugin-mdx 및 gatsby-transformer-mdx와 함께 MDX를 사용할 수있을 것입니다. 필요한 유일한 변경 사항은 Google 측에서 수행되며 .mdx 파일에서 게시물 템플릿을 내보내는 것입니다.

src/posts/hello-world.mdx :

import Post from '../components/post'

# Hello World

Lorem ipsum.

export default Post

gatsby-node.js :

const path = require('path')

exports.createPages = ({ actions }) => {
  actions.createPage({
    path: '/posts/hello-world',
    component: path.join(__dirname, 'src', 'posts', 'hello-world.mdx'),
    context: { /* passed as pageContext */ }
  })
}

src/components/post.js :

import React from 'react'
import Layout from './layout'

export default ({ children, pageContext }) => (
  <Layout>
    {children}
  </Layout>
)

정말 중요하다고 생각합니다. 현재 모든 gatsby-remark-* 플러그인은 React에있을 수 있고 있어야 할 렌더링 로직을 다시 구현하고 있습니다. 이것은 일을 많이 단순화 할 수 있습니다.

@DylanVann 은 다소 의존합니다. gatsby-remark-* 플러그인은 많은 빌드 시간 변환을 수행하므로 React에서 수행하면 많은 JS를 브라우저에 전달해야합니다. 또한 https://www.gatsbyjs.org/packages/gatsby-remark-images/?=remark-image 와 같이 React에서 할 수없는 일들

물론 이상적으로는 두 세계를 혼합합니다.

@KyleAMathews 예, 정적 HTML로 처음 전달되지만 클라이언트 측에서 더 많은 JS를 의미합니다. 어쨌든 많은 사람들이 사이트의 일부에 대해 gatsby-image 를) 배송하고 있다고 생각하므로이 경우 복제는 문제가되지 않습니다.

gatsby-remark-* 플러그인에 유틸리티가 있다는 것을 알고 있습니다. 특히 현재 문자열로 수행되는 렌더링 로직은 React에서 수행 할 수있는 것처럼 보입니다.

저는 htmlAst / rehype-react 메서드로 이런 종류의 작업을했습니다.

그렇게 보이지만 실제로는 훨씬 더 복잡합니다. 당신이 무언가에 관심이 있다고 생각한다면, 집중된 제안으로 새로운 문제를 제기 할 수 있습니다.

해결하기 어려운 문제인 것 같습니다. 불행히도 나는 아무것도 구현하거나 제안을 할 시간이 없을 것이라고 생각합니다. 부분적으로 React 사용자 정의 구성 요소를 사용하여 remark 플러그인을 수행한다는 아이디어는 확실히 작동하며이를 사용하는 코드가 있습니다.

mp4 끝나는 마크 다운 이미지에서 @dylanvann/gatsby-remark-cloudinary 의해 생성됩니다. 아이디어는 비디오를 최적화하는 것입니다 (제작시 크기 조정, 포스터 추가). 그래도 React에서 렌더링 로직을 원했습니다. 비디오 처리는 다른 기능에서 수행되지만 이는 노드의 HTML이 대체되는 부분입니다.

export const videoHTML = ({
    srcVideo,
    srcVideoPoster,
    base64,
    paddingBottom,
    presentationWidth,
}) =>
    `<cloud-video srcvideo="${srcVideo}" srcvideoposter="${srcVideoPoster}" base64="${base64}" paddingbottom="${paddingBottom}" presentationwidth="${presentationWidth}"></cloud-video>`

그런 다음 rehype-react 와 함께 사용자 지정 구성 요소를 사용합니다.

import React from 'react'
import rehypeReact from 'rehype-react'
import CloudVideo from './CloudVideo'

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'cloud-video': CloudVideo,
  },
}).Compiler

const Markdown = ({ ast }) => renderAst(ast)

Markdown.propTypes = {
  ast: PropTypes.object,
}

export default Markdown

ast는 GraphQL에서 꺼낼 수 있습니다.

따라서이 구성 요소는 SSR 및 클라이언트 측에서 작동합니다. 어쨌든 나는 그것이 OSS와 어떻게되는지 압니다. 나는 그것이 훌륭한 기능이 될 것이라고 생각하고 코드 복잡성을 줄일 수 있다고 생각하므로 누구든지 더 나은 솔루션을 찾을 시간이 있다면 좋을 것입니다.

나는 당신이 말하는 것에 동의하지 않습니다. 좋은 토론을 시작하는 것이 60 개 이상의 댓글로 이루어진 매우로드 된 스레드가 끝나는 것보다 자체 문제에서 훨씬 낫다고 생각합니다. 😉

Me와 @avigoldman은 야심 찬 2.0 호환 MDX 통합 및 유틸리티를 수용하기 위해 gatsby-mdx 를 구축

현재 gatsby .mdx 페이지는 플러그인을 활성화 한 후 기본적으로 작동하며 mdx 위에 다음과 같은 추가 기능이 추가되었습니다.

• 클래식 및 JSON 스타일 Frontmatter 사용 및 쿼리
• 하나를 정의하지 않는 mdx 파일에 대한 기본 레이아웃 정의

또한보다 정교한 통합을 계획하고 있습니다.

• 고급 이미지 처리
• 사용자 정의 md 및 hast 플러그인.
• gatsby-transformer-remark와 동일한 모든 필드와의 호환성

아직 수명주기 초기 단계이므로 문제가 발생하면 알려 주시면 해결해 드리겠습니다. :)

@ChristopherBiscardi는 나 대신의 개츠비 - 플러그인 - MDX와 함께 사용하기위한 것입니까?

@silvenon gatsby-plugin-mdx 는 더 이상 사용되지 않아 1.0에서 중지되는 반면 gatsby-mdx는 2.0 이상에서 앞으로 나아갈 것입니다.

@ m-allanson은 이제 gatsby-mdx 가

여러분 감사합니다 🎉

그래서 인 gatsby-mdx 지금보다 선호 될 rehype-react 과 함께 gatsby-transformer-remark 바와 같이 여기를 ?

대답이 명확하지 않다면 누군가가 두 접근 방식의 장점과 단점을 설명 할 수 있습니까?

그 블로그 게시물 의이 부분이 귀하의 질문에 대한 답변이라고 생각 JSX를, 그것은 예측의 적은주의 사항이 있습니다.

저는 Gatsby 팀에 속해 있지 않지만 그렇다고 말하고 싶습니다. gatsby-mdx는 Markdown에서 React의 선호하는 방법입니다.

@janosh 내가 아는 한 gatsby-mdx는 아직 gatsby-transformer-remark를 완전히 대체 할 수 없습니다.
예를 들어 gatsby-remark-images 및 gatsby-remark-copy-linked-files 및 기타 gatsby-remark 플러그인을 여전히 놓친 것 같습니다.
작업중인 것 같지만 현재 상태는 확실하지 않습니다.

그러나 플러그인이 필요하지 않거나 기다릴 수 있다면 예라고 말할 것입니다. 적어도 나는 그것을 선호합니다.

@CanRau 나는 병합 및 해제 할 의도로 오늘 (https://github.com/ChristopherBiscardi/gatsby-mdx/pull/68)이를 리베이스하고 있습니다. 우리가 처리해야 할 몇 가지 예외적 인 경우가있을 수 있지만, 병합하기 전에 오늘 스트림에서 몇 가지를 살펴 보겠습니다.

PR 상태는 gatsby-remark- * 플러그인이 제대로 적용되지만, gatsby-remark-prismjs 플러그인 (현재 HTML 출력을 생성하는)의 출력이 Transformer-remark와 mdx의 출력 처리 방식에 차이가 있습니다. 관로. 나는 gatsby-remark-prismjs와 같은 플러그인에 대한 지원이 중요하지만 차선책도 중요하다고 생각합니다. MDX 세계에서 더 좋은 방법은 같은 것을 사용하는 것입니다 프리즘 반응 렌더러 는 AS code 의 요소 MDXProvider 렌더링을 통해 당신에게 완전한 유연성 및 제어 할 것이다 사용에 비해 remark 플러그인을 사용하여 비슷한 효과를 얻을 수 있습니다 (또한 해당 구성 요소를 .js 페이지와 같은 비 MDX 콘텐츠와 공유 할 수 있음).

나는 gatsby-remark- * 플러그인 지원의 첫 번째 릴리스를 위해 작업하는 prismjs보다 작업 복사 링크 파일 및 이미지 처리에 훨씬 더 관심이 있습니다.

@ChristopherBiscardi, 특히 카피 링크 파일과 이미지 지원이 정말 멋지네요. 돕고 싶지만 현실적으로 말하면 정말 꽉 차서 지금 당장 처리 할 수 ​​없을 것 같아요 ^^
피드백을 공유 할 수있을 것 같고, 작은 메타 페이지를 시도해 볼 수있을 것 같습니다.

당신이 당신의 작품을 스트리밍하고 있다는 사실이 흥미로워 요 .. 저는 생방송에 익숙하지 않고 당신이 언제 인생을 갈지 알 수있는 방법을 아직 이해하지 못합니다. 아마도 계정으로 만 일하는 것 같습니다.

시간이 있으면 언제든지 도와 주셔서 기쁩니다. 질문이 있으시면 언제든지 저에게 핑을 보내주세요. :) 피드백 자체가 어느 쪽이든 도움이되므로 문제를 해결해 보시기 바랍니다.

당신이 당신의 작품을 스트리밍하고 있다는 사실이 흥미로워 요 .. 저는 생방송에 익숙하지 않고 당신이 언제 인생을 갈지 알 수있는 방법을 아직 이해하지 못합니다. 아마도 계정으로 만 일하는 것 같습니다.

Twitch 채널 하단에 스트리밍 시간 "캘린더"를 설정했습니다. 누군가 Twitch 계정이 있고 나를 팔로우하면 내가 라이브로 전환 될 때 알림을받을 수 있지만 그렇지 않으면 일정을 확인할 수 있습니다. 계정이 있는지 여부를 볼 수 있습니다. 나는 나 자신을 스트리밍하는 데 약간 익숙하기 때문에 (지금은 몇 주 밖에 안됨) 이런 종류의 작업을 수행하는 더 나은 방법에 항상 열려 있습니다. 나는 몇 명의 사람들이 반복적으로 돌아와서 놀고 /보고 / 대화하면서 꽤 재미있었습니다. :)

Kay 알았습니다. 반갑습니다.

그리고 나는 어떤 문제가 발생하면 반드시 문제를 게시 할 것입니다.)

Btw, Prism이 언급 되었기 때문에 이상적으로 remark / rehype 플러그인을 직접 사용해야한다고 추가하고 싶습니다. MDX는 mdPlugins 및 hastPlugins 옵션을 통해이를 지원합니다 (개츠비를 통해 전달 될 수 있음). -mdx). @ mapbox / rehype-prism과 같은 플러그인을 hastPlugins 추가 할 수 있지만 mdx-js / mdx # 226에서 수정 한 공백 문제가 있었으므로 일단 병합 및 해제되면 구문 강조 표시가 좋습니다. 토고!

네, 완전히 요. gatsby-mdx는 이미 mdx 코어를 통한 remark / rehype 플러그인 전달을 지원합니다. 여기 mapbox / rehype 프리즘 @ 예를 들어 (I 감사, 원래 @silvenon 당신의 PR / 이슈 토론의 일부에서 그 예를 나갔어요). AFAIK rehype prism은 프리즘 플러그인을 지원하지 않으므로 사용 사례에 따라 항상 트레이드 오프입니다 (프리즘에 rehype 플러그인을 사용하면 예를 들어 react-live 와 같은 것을 통합하는 데 더 많은 시간을 할애 할 수 있습니다).

gatsby-remark-prismjs 및 기타 gatsby-remark- * 플러그인 지원이 오늘 0.1.1에서 릴리스되었으므로 이제 rehype / remark / react-components 사이에 구문 강조 표시를위한 최소 3 가지 옵션이 있습니다 .😝