markdown-it-puyo demo

In order to show this:



















You can write this in markdown:

puyo {


G
YY
GR
GGR
RR
}

With those css:

.puyo{
  border: 1px solid #eeeeee;
  display: block;
  font-size: 0px;
  position: relative;
  height: 140px;
  width: 120px;
}
.puyo span{
  display: inline-block;
  width: 20px;
  height: 20px;
}
.puyo div{
  position: absolute;
}
.puyo-G{
  background-color: #0f0;
}
.puyo-R{
  background-color: #F00;
}
.puyo-Y{
  background-color: #FF0;
}

last updated at 2019/4/5 21:31