Skip to content

Commit 7c23fef

Browse files
chvmvdchvmvd
authored
Merge pull request #82 from sikepuri-algorithm/add-math-description
Add math description
2 parents 9f33a62 + 532b0c1 commit 7c23fef

File tree

5 files changed

+342
-64
lines changed

5 files changed

+342
-64
lines changed

‎docs/03extras/04website/02docusaurus/index.mdx

Lines changed: 257 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -58,89 +58,89 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame";
5858
:::info
5959
先程、Docusaurus は Markdown という形式で書くことができると書きました。ここで、Markdown 記法について少し紹介しておきます。より詳しいことは、自分で調べてみてください。
6060

61-
1. `#` と書くことで見出しを書くことができます。
61+
1. `#` と書くことで見出しを書くことができます。
6262

63-
<InteractiveCodeEditor
64-
language="markdown"
65-
defaultValue={"# レベル 1 の見出し"}
66-
/>
63+
<InteractiveCodeEditor
64+
language="markdown"
65+
defaultValue={"# レベル 1 の見出し"}
66+
/>
6767

68-
2. `##` は `#` の一個下の見出しです。
68+
1. `##` は `#` の一個下の見出しです。
6969

70-
<InteractiveCodeEditor
71-
language="markdown"
72-
defaultValue={"## レベル 2 の見出し"}
73-
/>
70+
<InteractiveCodeEditor
71+
language="markdown"
72+
defaultValue={"## レベル 2 の見出し"}
73+
/>
7474

75-
3. `**` で強調することができます。
75+
1. `**` で強調することができます。
7676

77-
<InteractiveCodeEditor language="markdown" defaultValue={"**強調**"} />
77+
<InteractiveCodeEditor language="markdown" defaultValue={"**強調**"} />
7878

79-
4. `>` とすることで引用することができます。
79+
1. `>` とすることで引用することができます。
8080

81-
<InteractiveCodeEditor language="markdown" defaultValue={"> 引用"} />
81+
<InteractiveCodeEditor language="markdown" defaultValue={"> 引用"} />
8282

83-
5. 箇条書きは次のようにして書けます。
83+
1. 箇条書きは次のようにして書けます。
8484

85-
<InteractiveCodeEditor
86-
language="markdown"
87-
defaultValue={`\
88-
- アイテム 1
89-
- アイテム 2
90-
- アイテム 3\
91-
`}
92-
/>
85+
<InteractiveCodeEditor
86+
language="markdown"
87+
defaultValue={"- アイテム 1\n- アイテム 2\n- アイテム 3"}
88+
/>
9389

94-
6. 番号付き箇条書きは次のようにして書けます。
90+
1. 番号付き箇条書きは次のようにして書けます。
9591

96-
<InteractiveCodeEditor
97-
language="markdown"
98-
defaultValue={`\
99-
1. アイテム 1
100-
1. アイテム 2
101-
1. アイテム 3\
102-
`}
103-
/>
92+
<InteractiveCodeEditor
93+
language="markdown"
94+
defaultValue={"1. アイテム 1\n1. アイテム 2\n1. アイテム 3"}
95+
/>
10496

105-
7. バッククォート（ `` ` `` ）で囲むことでインラインコードを表示することができます。
97+
1. バッククォート（ `` ` `` ）で囲むことでインラインコードを表示することができます。
10698

107-
<InteractiveCodeEditor language="markdown" defaultValue={"`コードテキスト`"} />
99+
<InteractiveCodeEditor
100+
language="markdown"
101+
defaultValue={"`コードテキスト`"}
102+
/>
108103

109-
8. バッククォート 3 つで、コードブロックを表示することができます。
104+
1. バッククォート 3 つで、コードブロックを表示することができます。
110105

111-
<InteractiveCodeEditor
112-
language="markdown"
113-
defaultValue={`\
114-
\`\`\`python
115-
print("Hello World!")
116-
\`\`\`\
117-
`}
118-
/>
106+
<InteractiveCodeEditor
107+
language="markdown"
108+
defaultValue={'```python\nprint("Hello World!")\n```'}
109+
/>
119110

120-
9. リンクは次のようにして表すことができます。
111+
1. リンクは次のようにして表すことができます。
121112

122-
<InteractiveCodeEditor
123-
language="markdown"
124-
defaultValue={
125-
"[Introduction to Algorithms](https://sikepuri-algorithm.github.io/)"
126-
}
127-
/>
113+
<InteractiveCodeEditor
114+
language="markdown"
115+
defaultValue={
116+
"[Introduction to Algorithms](https://sikepuri-algorithm.github.io/)"
117+
}
118+
/>
128119

129-
10. 画像は次のようにして表示することができます。もちろん相対パスも使えます。
120+
1. 画像は次のようにして表示することができます。もちろん相対パスも使えます。
130121

131-
<InteractiveCodeEditor
132-
language="markdown"
133-
defaultValue={
134-
"![Introduction to Algorithms](https://sikepuri-algorithm.github.io/img/favicon.ico)"
135-
}
136-
/>
122+
<InteractiveCodeEditor
123+
language="markdown"
124+
defaultValue={
125+
"![Introduction to Algorithms](https://sikepuri-algorithm.github.io/img/favicon.ico)"
126+
}
127+
/>
137128

138-
11. 実は、Markdown の中には HTML も書くことができます。
129+
1. 実は、Markdown の中には HTML も書くことができます。
139130

140-
<InteractiveCodeEditor
141-
language="markdown"
142-
defaultValue={'<button type="button">ボタン</button>'}
143-
/>
131+
<InteractiveCodeEditor
132+
language="markdown"
133+
defaultValue={'<button type="button">ボタン</button>'}
134+
/>
135+
136+
1. 多くの場合、数式を書くこともできます。
137+
138+
<InteractiveCodeEditor
139+
language="markdown"
140+
defaultValue={
141+
"$a^2 + b^2 = c^2$\n$$\n\\frac{\\pi}{2} =\n \\left( \\int_{0}^{\\infty} \\frac{\\sin x}{\\sqrt{x}} dx \\right)^2 =\n \\sum_{k=0}^{\\infty} \\frac{(2k)!}{2^{2k}(k!)^2} \\frac{1}{2k+1} =\n \\prod_{k=1}^{\\infty} \\frac{4k^2}{4k^2 - 1}\n$$"
142+
}
143+
/>
144144

145145
:::
146146

@@ -164,3 +164,198 @@ import LifeGame from "@site/src/components/LifeGame/LifeGame";
164164
```
165165

166166
:::
167+
168+
:::tip
169+
Docusaurus で数式を表示するには、以下のようにします。[Docusaurus の公式サイトの説明](https://docusaurus.io/docs/markdown-features/math-equations)を参考にしてください。
170+
171+
1. ターミナルで以下を実行して、プラグインをインストールします。
172+
173+
```shell
174+
npm install --save remark-math@3 rehype-katex@5 hast-util-is-element@1.1.0
175+
```
176+
177+
1. `docusaurus.config.js` の先頭に以下を追記します。これで、数式のプラグインがインポートできます。
178+
179+
```javascript title="docusaurus.config.js"
180+
const math = require("remark-math");
181+
const katex = require("rehype-katex");
182+
```
183+
184+
1. `presets` オプションに以下を追記します。`docs` の中などに書くと良いでしょう。これで、`docs` の中でプラグインを使えます。
185+
186+
```javascript title="docusaurus.config.js"
187+
remarkPlugins: [math],
188+
rehypePlugins: [katex],
189+
```
190+
191+
1. 以下のようにスタイルシートの設定を追記します。
192+
193+
```javascript title="docusaurus.config.js"
194+
stylesheets: [
195+
{
196+
href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
197+
type: 'text/css',
198+
integrity:
199+
'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
200+
crossorigin: 'anonymous',
201+
},
202+
],
203+
```
204+
205+
以上のようにすると、次のようになります。よく分からなければ、以下を自分の `docusaurus.config.js` に貼り付けると良いでしょう。
206+
207+
```javascript title="docusaurus.config.js"
208+
// @ts-check
209+
// Note: type annotations allow type checking and IDEs autocompletion
210+
211+
// highlight-start
212+
const math = require("remark-math");
213+
const katex = require("rehype-katex");
214+
// highlight-end
215+
const lightCodeTheme = require("prism-react-renderer/themes/github");
216+
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
217+
218+
/** @type {import('@docusaurus/types').Config} */
219+
const config = {
220+
title: "My Site",
221+
tagline: "Dinosaurs are cool",
222+
url: "https://your-docusaurus-test-site.com",
223+
baseUrl: "/",
224+
onBrokenLinks: "throw",
225+
onBrokenMarkdownLinks: "warn",
226+
favicon: "img/favicon.ico",
227+
228+
// GitHub pages deployment config.
229+
// If you aren't using GitHub pages, you don't need these.
230+
organizationName: "facebook", // Usually your GitHub org/user name.
231+
projectName: "docusaurus", // Usually your repo name.
232+
233+
// Even if you don't use internalization, you can use this field to set useful
234+
// metadata like html lang. For example, if your site is Chinese, you may want
235+
// to replace "en" with "zh-Hans".
236+
i18n: {
237+
defaultLocale: "en",
238+
locales: ["en"],
239+
},
240+
241+
presets: [
242+
[
243+
"classic",
244+
/** @type {import('@docusaurus/preset-classic').Options} */
245+
({
246+
docs: {
247+
sidebarPath: require.resolve("./sidebars.js"),
248+
// Please change this to your repo.
249+
// Remove this to remove the "edit this page" links.
250+
editUrl:
251+
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
252+
// highlight-start
253+
remarkPlugins: [math],
254+
rehypePlugins: [katex],
255+
// highlight-end
256+
},
257+
blog: {
258+
showReadingTime: true,
259+
// Please change this to your repo.
260+
// Remove this to remove the "edit this page" links.
261+
editUrl:
262+
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
263+
},
264+
theme: {
265+
customCss: require.resolve("./src/css/custom.css"),
266+
},
267+
}),
268+
],
269+
],
270+
// highlight-start
271+
stylesheets: [
272+
{
273+
href: "https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css",
274+
type: "text/css",
275+
integrity:
276+
"sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM",
277+
crossorigin: "anonymous",
278+
},
279+
],
280+
// highlight-end
281+
282+
themeConfig:
283+
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
284+
({
285+
navbar: {
286+
title: "My Site",
287+
logo: {
288+
alt: "My Site Logo",
289+
src: "img/logo.svg",
290+
},
291+
items: [
292+
{
293+
type: "doc",
294+
docId: "intro",
295+
position: "left",
296+
label: "Tutorial",
297+
},
298+
{ to: "/blog", label: "Blog", position: "left" },
299+
{
300+
href: "https://github.com/facebook/docusaurus",
301+
label: "GitHub",
302+
position: "right",
303+
},
304+
],
305+
},
306+
footer: {
307+
style: "dark",
308+
links: [
309+
{
310+
title: "Docs",
311+
items: [
312+
{
313+
label: "Tutorial",
314+
to: "/docs/intro",
315+
},
316+
],
317+
},
318+
{
319+
title: "Community",
320+
items: [
321+
{
322+
label: "Stack Overflow",
323+
href: "https://stackoverflow.com/questions/tagged/docusaurus",
324+
},
325+
{
326+
label: "Discord",
327+
href: "https://discordapp.com/invite/docusaurus",
328+
},
329+
{
330+
label: "Twitter",
331+
href: "https://twitter.com/docusaurus",
332+
},
333+
],
334+
},
335+
{
336+
title: "More",
337+
items: [
338+
{
339+
label: "Blog",
340+
to: "/blog",
341+
},
342+
{
343+
label: "GitHub",
344+
href: "https://github.com/facebook/docusaurus",
345+
},
346+
],
347+
},
348+
],
349+
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
350+
},
351+
prism: {
352+
theme: lightCodeTheme,
353+
darkTheme: darkCodeTheme,
354+
},
355+
}),
356+
};
357+
358+
module.exports = config;
359+
```
360+
361+
:::

‎docs/03extras/04website/index.mdx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,36 @@ Web サイトは、HTML を用いて作るのが一般的です。以下に HTML
3434
`}
3535
/>
3636

37+
もう少しおまじないを唱えれば、数式も表示できます。
38+
39+
<InteractiveCodeEditor
40+
language="html"
41+
defaultValue={`\
42+
<!DOCTYPE html>
43+
<html lang="ja">
44+
<head>
45+
<meta charset="UTF-8" />
46+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
47+
<title>Document</title>
48+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.css" integrity="sha384-Juol1FqnotbkyZUT5Z7gUPjQ9gzlwCENvUZTpQBAPxtusdwFLRy382PSDx5UUJ4/" crossorigin="anonymous">
49+
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.js" integrity="sha384-97gW6UIJxnlKemYavrqDHSX3SiygeOwIZhwyOKRfSaf0JWKRVj9hLASHgFTzT+0O" crossorigin="anonymous"></script>
50+
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
51+
</head>
52+
<body>
53+
<p> \\(a^2 + b^2 = c^2\\) </p>
54+
<p>
55+
$$
56+
\\frac{\\pi}{2} =
57+
\\left( \\int_{0}^{\\infty} \\frac{\\sin x}{\\sqrt{x}} dx \\right)^2 =
58+
\\sum_{k=0}^{\\infty} \\frac{(2k)!}{2^{2k}(k!)^2} \\frac{1}{2k+1} =
59+
\\prod_{k=1}^{\\infty} \\frac{4k^2}{4k^2 - 1}
60+
$$
61+
</p>
62+
</body>
63+
</html>\
64+
`}
65+
/>
66+
3767
さらに、見た目を整えることのできる CSS と動きを与えることのできる JavaScript を使うと次のような表現も可能です。
3868

3969
<InteractiveCodeEditor

0 commit comments

Comments
 (0)