From 97ea8e91685432866c90b1282bad63baf2dd7324 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 24 Apr 2020 11:22:43 +0900 Subject: [PATCH 1/4] docs: translate docs/mdx/customizing-components --- docs/docs/mdx/customizing-components.md | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/docs/docs/mdx/customizing-components.md b/docs/docs/mdx/customizing-components.md index 842d91b27..907dee891 100644 --- a/docs/docs/mdx/customizing-components.md +++ b/docs/docs/mdx/customizing-components.md @@ -1,10 +1,9 @@ --- -title: Customizing Markdown Components +title: コンポーネントをカスタマイズする --- -Using MDX, you can replace every HTML element that Markdown renders with a -custom implementation. This allows you to use a set of design system components -when rendering. +MDX を使えば，Markdown でレンダリングできる全ての HTML 要素をカスタマイズした実装に置き換えることが可能です。 +これによって，デザインシステムで定義されたコンポーネントを利用できるようになります。 ```jsx:title=src/components/layout.js import { MDXProvider } from "@mdx-js/react" @@ -14,11 +13,11 @@ export default function Layout({ children }) { return (

, }} > @@ -28,9 +27,7 @@ export default function Layout({ children }) { } ``` -**Note**: you can also provide your own custom components to the `MDXProvider` that make them globally available while writing MDX. You can find more details about this pattern in the [Importing and Using Components in MDX guide](/docs/mdx/importing-and-using-components/#make-components-available-globally-as-shortcodes). - -The following components can be customized with the MDXProvider: +以下の表は，MDXProvider を用いてカスタマイズできるコンポーネントの一覧です。 | Tag | Name | Syntax | | --------------- | -------------------------------------------------------------------- | --------------------------------------------------- | @@ -59,12 +56,11 @@ The following components can be customized with the MDXProvider: | `a` | [Link](https://github.com/syntax-tree/mdast#link) | `` or `[MDX](https://mdxjs.com)` | | `img` | [Image](https://github.com/syntax-tree/mdast#image) | `![alt](https://mdx-logo.now.sh)` | -## How does this work? +## これはどうやって実現されているのか？ -Components passed to the MDXProvider are used to render the HTML elements -that Markdown creates. It uses -[React's Context API](https://reactjs.org/docs/context.html). +MDXProvider で変換されたコンポーネントは，Markdown が生成する HTML 要素をレンダリングする目的で使用されます。 +この過程では，[React's Context API](https://reactjs.org/docs/context.html)を用いています。 -## Related +## 関連ドキュメント - [MDX components](https://mdxjs.com/getting-started/) From 404eb268f2e0563f417144bad723c3604c72bc13 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 24 Apr 2020 12:59:20 +0900 Subject: [PATCH 2/4] Apply textlint feedback --- docs/docs/mdx/customizing-components.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/docs/mdx/customizing-components.md b/docs/docs/mdx/customizing-components.md index 907dee891..876c95352 100644 --- a/docs/docs/mdx/customizing-components.md +++ b/docs/docs/mdx/customizing-components.md @@ -2,8 +2,8 @@ title: コンポーネントをカスタマイズする --- -MDX を使えば，Markdown でレンダリングできる全ての HTML 要素をカスタマイズした実装に置き換えることが可能です。 -これによって，デザインシステムで定義されたコンポーネントを利用できるようになります。 +MDX を使えば、Markdown でレンダリングできる全ての HTML 要素をカスタマイズした実装に置き換えることが可能です。 +これによって、デザインシステムで定義されたコンポーネントを利用できるようになります。 ```jsx:title=src/components/layout.js import { MDXProvider } from "@mdx-js/react" @@ -13,11 +13,11 @@ export default function Layout({ children }) { return (

, }} > @@ -27,7 +27,7 @@ export default function Layout({ children }) { } ``` -以下の表は，MDXProvider を用いてカスタマイズできるコンポーネントの一覧です。 +以下の表は、MDXProvider を用いてカスタマイズできるコンポーネントの一覧です。 | Tag | Name | Syntax | | --------------- | -------------------------------------------------------------------- | --------------------------------------------------- | @@ -58,8 +58,8 @@ export default function Layout({ children }) { ## これはどうやって実現されているのか？ -MDXProvider で変換されたコンポーネントは，Markdown が生成する HTML 要素をレンダリングする目的で使用されます。 -この過程では，[React's Context API](https://reactjs.org/docs/context.html)を用いています。 +MDXProvider で変換されたコンポーネントは、Markdown が生成する HTML 要素をレンダリングする目的で使用されます。 +この過程では、[React's Context API](https://reactjs.org/docs/context.html)を用いています。 ## 関連ドキュメント From 4c7a3ea1b59cce803650b6f63998339888efe62a Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 24 Apr 2020 13:40:38 +0900 Subject: [PATCH 3/4] docs: Update translation --- docs/docs/mdx/customizing-components.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/docs/mdx/customizing-components.md b/docs/docs/mdx/customizing-components.md index 876c95352..01abb928b 100644 --- a/docs/docs/mdx/customizing-components.md +++ b/docs/docs/mdx/customizing-components.md @@ -27,6 +27,8 @@ export default function Layout({ children }) { } ``` +**Note**: MDX を書くときに、グローバルにアクセスできる独自のコンポーネントを `MDXProvider` に定義することもできます。このパターンに関しては、[MDX にコンポーネントを import して使う方法](/docs/mdx/importing-and-using-components/#make-components-available-globally-as-shortcodes) を参照してください。 + 以下の表は、MDXProvider を用いてカスタマイズできるコンポーネントの一覧です。 | Tag | Name | Syntax | From f219922812a8ac5174d324b42e5abef9b9c43229 Mon Sep 17 00:00:00 2001 From: kenmikanmi Date: Fri, 24 Apr 2020 13:43:02 +0900 Subject: [PATCH 4/4] docs: Remove new line from paragraphs --- docs/docs/mdx/customizing-components.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/docs/mdx/customizing-components.md b/docs/docs/mdx/customizing-components.md index 01abb928b..c680e6595 100644 --- a/docs/docs/mdx/customizing-components.md +++ b/docs/docs/mdx/customizing-components.md @@ -2,8 +2,7 @@ title: コンポーネントをカスタマイズする --- -MDX を使えば、Markdown でレンダリングできる全ての HTML 要素をカスタマイズした実装に置き換えることが可能です。 -これによって、デザインシステムで定義されたコンポーネントを利用できるようになります。 +MDX を使えば、Markdown でレンダリングできる全ての HTML 要素をカスタマイズした実装に置き換えることが可能です。これによって、デザインシステムで定義されたコンポーネントを利用できるようになります。 ```jsx:title=src/components/layout.js import { MDXProvider } from "@mdx-js/react" @@ -60,8 +59,7 @@ export default function Layout({ children }) { ## これはどうやって実現されているのか？ -MDXProvider で変換されたコンポーネントは、Markdown が生成する HTML 要素をレンダリングする目的で使用されます。 -この過程では、[React's Context API](https://reactjs.org/docs/context.html)を用いています。 +MDXProvider で変換されたコンポーネントは、Markdown が生成する HTML 要素をレンダリングする目的で使用されます。この過程では、[React's Context API](https://reactjs.org/docs/context.html)を用いています。 ## 関連ドキュメント