Expressive Codeの例

1146 字

6 min

Expressive Codeの例

1002-04-10

Default

Markdown

/

Blogging

/

Demo

ここでは、Expressive Code を使用したコードブロックの表示方法について見ていきます。提供される例は公式ドキュメントに基づいており、さらなる詳細についてはそちらを参照してください。

Expressive Code#

シンタックスハイライト#

通常のシンタックスハイライト#

1
console.log('This code is syntax highlighted!')

ANSIエスケープシーケンスのレンダリング#

1
ANSI colors:
2
- Regular: Red Green Yellow Blue Magenta Cyan
3
- Bold:    Red Green Yellow Blue Magenta Cyan
4
- Dimmed:  Red Green Yellow Blue Magenta Cyan
5

6
256 colors (showing colors 160-177):
7
160 161 162 163 164 165
8
166 167 168 169 170 171
9
172 173 174 175 176 177
10

11
Full RGB colors:
12
ForestGreen - RGB(34, 139, 34)
13

14
Text formatting: Bold Dimmed Italic Underline

エディターとターミナルフレーム#

コードエディターフレーム#

1
console.log('Title attribute example')

1
<div>File name comment example</div>

ターミナルフレーム#

1
echo "This terminal frame has no title"

1
Write-Output "This one has a title!"

フレームタイプのオーバーライド#

1
echo "Look ma, no frame!"

1
# Without overriding, this would be a terminal frame
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

テキストと行マーカー#

全行と行範囲のマーク#

1
// Line 1 - 行番号でターゲット指定
2
// Line 2
3
// Line 3
4
// Line 4 - 行番号でターゲット指定
5
// Line 5
6
// Line 6
7
// Line 7 - 範囲 "7-8" でターゲット指定
8
// Line 8 - 範囲 "7-8" でターゲット指定

行マーカータイプの選択 (mark, ins, del)#

1
function demo() {
2
  console.log('この行は削除としてマークされます')
3
  // この行とその次の行は挿入としてマークされます
4
  console.log('これは2番目の挿入行です')
5

6
  return 'この行は中立のデフォルトマーカータイプを使用します'
7
}

行マーカーへのラベル追加#

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

独立した行に長いラベルを追加#

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

diffライクな構文の使用#

1
この行は挿入としてマークされます
2
この行は削除としてマークされます
3
これは通常の行です

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+これは実際のdiffファイルです
5
-すべての内容は変更されません
6
空白も削除されません

シンタックスハイライトとdiffライクな構文の組み合わせ#

1
function thisIsJavaScript() {
2
  // このブロック全体がJavaScriptとしてハイライトされますが、
3
  // diffマーカーも追加できます！
4
  console.log('削除される古いコード')
5
  console.log('新しくて素晴らしいコード！')
6
}

行内の特定テキストのマーク#

1
function demo() {
2
  // 行内の指定されたテキストをマーク
3
  return '指定されたテキストの複数のマッチがサポートされます';
4
}

正規表現#

1
console.log('yes と yep の単語がマークされます。')

スラッシュのエスケープ#

1
echo "Test" > /home/test.txt

インラインマーカータイプの選択 (mark, ins, del)#

1
function demo() {
2
  console.log('これらは挿入および削除マーカータイプです');
3
  // return文はデフォルトのマーカータイプを使用します
4
  return true;
5
}

自動折り返し#

コードブロックごとの自動折り返し設定#

1
// wrapの例
2
function getLongString() {
3
  return 'これは、コンテナが非常に幅広でない限り、利用可能なスペースに収まらない可能性が非常に高い非常に長い文字列です'
4
}

1
// wrap=falseの例
2
function getLongString() {
3
  return 'これは、コンテナが非常に幅広でない限り、利用可能なスペースに収まらない可能性が非常に高い非常に長い文字列です'
4
}

折り返し行のインデント設定#

1
// preserveIndentの例（デフォルトで有効）
2
function getLongString() {
3
  return 'これは、コンテナが非常に幅広でない限り、利用可能なスペースに収まらない可能性が非常に高い非常に長い文字列です'
4
}

1
// preserveIndent=falseの例
2
function getLongString() {
3
  return 'これは、コンテナが非常に幅広でない限り、利用可能なスペースに収まらない可能性が非常に高い非常に長い文字列です'
4
}

折りたたみ可能なセクション#


5 collapsed lines
1
// このボイラープレートのセットアップコードはすべて折りたたまれます
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// このコード部分はデフォルトで表示されます
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // 複数の折りたたみ可能なセクションを持つことができます
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // これは表示されたままになります
17
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// このブロックの終わりまでのすべてのコードが再度折りたたまれます
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: 'End of example boilerplate code' })

行番号#

コードブロックごとの行番号表示#

1
// このコードブロックは行番号を表示します
2
console.log('2行目からご挨拶！')
3
console.log('私は3行目です')

// このブロックでは行番号は無効です
console.log('こんにちは？')
console.log('すみません、私は何行目にいますか？')

開始行番号の変更#

5
console.log('5行目からご挨拶！')
6
console.log('私は6行目です')

Expressive Codeの例

https://asterion.pages.dev/posts/default/expressive-code/

著者

Nyx

公開日

1002-04-10

License

CC BY-NC-SA 4.0

Markdown Extended Features

Fuwariの簡単な使い方ガイド