インラインコード
これは インラインコード です。
コードブロック
markdown
```
import numpy as np
import matplotlib.pyplot as plt
```出力：
import numpy as np
import matplotlib.pyplot as pltmarkdown
```python[title=code.py]
import numpy as np
import matplotlib.pyplot as plt
```出力：
code.py
import numpy as np
import matplotlib.pyplot as pltmarkdown
```python[title=code.py,showLineNumbers=true]
import numpy as np
import matplotlib.pyplot as plt
```出力：
code.py
1import numpy as np
2import matplotlib.pyplot as pltImportant
コード属性のカンマの後には空白を入れられません。 ✅ [title=asdf.py,showLineNumbers=true] ❌ [title=asdf.py, showLineNumbers=true]
code.js
1function createStyleObject(classNames, style) {
2 return classNames.reduce((styleObject, className) => {
3 return {...styleObject, ...style[className]};
4 }, {});
5}
6
7function createClassNameString(classNames) {
8 return classNames.join(' ');
9}
10
11
12function createChildren(style, useInlineStyles) {
13 let childrenCount = 0;
14 return children => {
15 childrenCount += 1;
16 return children.map((child, i) => createElement({
17 node: child,
18 style,
19 useInlineStyles,
20 key:`code-segment-${childrenCount}-${i}`
21 }));
22 }
23}
24
25function createElement({ node, style, useInlineStyles, key }) {
26 const { properties, type, tagName, value } = node;
27 if (type === "text") {
28 return value;
29 } else if (tagName) {
30 const TagName = tagName;
31 const childrenCreator = createChildren(style, useInlineStyles);
32 const props = (
33 useInlineStyles
34 ? { style: createStyleObject(properties.className, style) }
35 : { className: createClassNameString(properties.className) }
36 );
37 const children = childrenCreator(node.children);
38 return <TagName key={key} {...props}>{children}</TagName>;
39 }
40}GitHubからコードを読み込む
github-code ディレクティブにGitHubの blob URLを指定します。記事の表示時にコードが取得され、通常のコードブロックと同じシンタックスハイライト、コピーボタン、任意の行番号が適用されます。
markdown
# titleを省略すると、ファイル名がタイトルとして使われます。
::github-code{url="https://github.com/kkensuke/pages/blob/main/next.config.js" title="next.config.js" language="javascript" showLineNumbers=true lines="2-8"}出力：
next.config.js
2const nextConfig = {
3 reactStrictMode: true,
4 swcMinify: true,
5 i18n: {
6 locales: ["en", "ja"],
7 defaultLocale: "en",
8 },