Skip to content

eronnen/vscode-markdown-chess

Repository files navigation

VSCode Chess Viewer

Visualize your chess notes in vscode!

Features:

  1. Markdown chess viewer
  2. 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
initialMove Move to display as the initial position. -1 for last -1,0,1,2,3,... 0
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

Boards

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.