Checkers Layout

Copy the following code to your CommonMark file:

---
Footer:<style>checkers table{height:360px;width:360px;margin:auto;padding:0px} checkers td, checkers th{font-size:100%;text-align:center;width:40px;vertical-align:middle;padding:0px}</style><script>$(function(){$("checkers td").each(function(){if($(this).text().charAt(0)=='+'){$(this).attr("style","background:lightgrey");$(this).text($(this).text().slice(1))}if($(this).text().charAt(0)=='-'){$(this).attr("style","background:darkgrey");$(this).text($(this).text().slice(1))}});});</script>
...

<checkers>

 💥| a | b | c | d | e | f | g | h
---|---|---|---|---|---|---|---|---
 8 |+♜|-♞|+♝|-♛|+♚|-♝|+♞|-
 7 |-♟|+♟|-♟|+♟|-♟|+♟|-♟|+
 6 |+  |-  |+  |-  |+  |-♙|+  |-
 5 |-  |+  |-♜|+  |-  |+  |-  |+
 4 |+  |-  |+  |-  |+  |-♟|+  |-
 3 |-  |+  |-  |+  |-  |+  |-♖|+
 2 |+♙|-♙|+♙|-♙|+♙|-♙|+♙|-
 1 |-♖|+♘|-♗|+♕|-♔|+♗|-♘|+ 

</checkers>

You can use table to draw a checkerboard. Use the first character in the table cell + or - to denote white or black checkers.

This is the result