VSCode Chess Viewer

Visualize your chess notes in vscode!

Features:

Markdown chess viewer
PGN file viewer

Markdown Usage

vscode-markdown-chess demo

Chess Positions

Create an empty chess board by writing a chess code block:

```chess

```

On an empty board you can move pieces and draw arrows/squares and copy it back to the chess code block, as shown in the demo GIF.

You can supply an initial FEN, and arrows/squares to mark on the board:

```chess
fen: r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 0 1
arrows: f3->e5 b5->c6
squares: g5 f7
```

Chess Games

You can view full chess games by using the pgn code block and copying a game in pgn format:

```pgn
orientation: black
[Event "India"]
[Date "1984.??.??"]
[Result "0-1"]
[White "Srinivas"]
[Black "Vaidyanathan Ravikumar"]
[PlyCount "28"]

1. d4 e5 2. dxe5 d6 3. exd6 Bxd6 4. c3 Nf6 5. Bg5 Nc6 6. e3
O-O 7. Bxf6 Qxf6 8. Qf3 Qg6 9. Ne2 Re8 10. Ng3 Nd4 11. cxd4
Bg4 12. Qxb7 Rab8 13. Qxa7 Qxb1+ 14. Kd2 Bb4# 0-1
```

Alternatively, you can supply a starting position and a move sequence:

```chess
fen: r1bqkbnr/1ppp1ppp/p1n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 0 4
moves: Ba4 Nf6 O-O b5 Bb3 Be7 Re1 d6
```

Properties

You can set various properties inside the code block, each one in a separate line in the format name: value.

Supported properties for chess and pgn blocks

These properties are available both for chess and pgn blocks. when using in a pgn block, the properties must come before the pgn itself.

Property	Description	Possible values	Default
orientation	Which side to view the board	white / black	white
size	Board width/height size in px (150-600)	400px	280px

Supported properties for chess blocks

These properties are only available for chess blocks.

Property	Description	Possible values	Default
fen	The initial position	Any valid FEN string	Initial
arrows	Series of arrows to draw	e2->e4 d2->d4	Empty
squares	Series of squares to mark	e5 d5	Empty
movable	Force to enable/disable movement	true / false	false if FEN supplied
drawable	Force to enable/disable drawing	true / false	false if arrows or squares supplied
lastMove	Highlight last move	e2 e4	Undefined
moves	Sequence of moves to view in the position	e4 e5 Nf3 Nf6 Nxe5	Undefined
variant	Variant name	Chess960	Undefined

PGN Viewer

This extension also implements a viewer to PGN files. When you open a pgn file, simply click the preview icon in order to view the PGN games.

PGN demo

Themes

Multiple board themes and piece sets are supported. Currently the extension has limited resources available, because they already increase the extension's size significantly.

You can change themes in the extension's settings, or via the Markdown: Open Chess Settings command.

Piece sets

merida (default)
cburnett
alpha

Boards

brown (default)
blue
green
ic
purple

License

This project is based on the Chessground and Chessops libraries by lichess in order to render the chess board and play moves, so I had to use the GPL-3.0 license for this project too.

TODO

[ ] show move number in PGN viewer
[ ] update PGN current move when clicking on move in editor
[ ] load themes and piece sets CSS in runtime
[ ] show FEN/PGN errors
[ ] in a capture of a black piece by a white piece, when animating previous move show the white on top of the black piece
[ ] handle en passant and promotion in chessPosition.ts
[ ] Support jpg/png board backgrounds
[ ] Support 3d pieces

Contributing

vscode-markdown-chess is developed on GitHub at eronne/vscode-mardown-chess. Feel free to add PRs, issues and feature request on the issues page.

Chess Viewer

Ely Ronnen