display cheat sheet content

resource/js/components/PageEditor/CodeMirrorEditor.js

@@ -474,7 +474,42 @@ export default class CodeMirrorEditor extends AbstractEditor {
     return (
       <div className="overlay overlay-gfm-cheatsheat mr-5 mb-2">
         <span style={style} className="overlay-content">
-          (TBD) Cheat Sheat
+           <div>
+            <p className="markdown-help">Markdownヘルプ</p>
+              <div>
+                <ul>
+                  <li># 見出し1</li>
+                  <li>## 見出し2</li>
+                  <li>### 見出し3</li>
+                  <li>#### 見出し4</li>
+                </ul>
+
+                <ul>
+                  <li>text[&nbsp;][&nbsp;](スペース2つで改行)</li>
+                  <li>text</li>
+                </ul>
+
+                <ul>
+                  <li>- リスト1</li>
+                  <li>[&nbsp;]- リスト1_1</li>
+                  <li>[&nbsp;][&nbsp;]- リスト1_1_1</li>
+                </ul>
+
+                <ul>
+                  <li>これは <i> *italic* </i>です</li>
+                  <li>これは <b> **ボールド** </b>です</li>
+                </ul>
+
+                <ul>
+                  <li>| Left align | Right align | Center align |</li>
+                  <li>|:------------|--------------:|:--------------:|</li>
+                  <li>| &nbsp;column 1|&nbsp; &nbsp;column 2&nbsp; &nbsp;|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
+                  <li>| &nbsp;column 1|&nbsp; &nbsp;column 2&nbsp; &nbsp;|&nbsp; &nbsp;column 3&nbsp; &nbsp;|</li>
+                </ul>
+
+              </div>
+
+          </div>
         </span>
       </div>
     );

resource/styles/scss/_editor-overlay.scss

@@ -36,13 +36,32 @@
 
   // cheat sheat
   .overlay.overlay-gfm-cheatsheat {
+
     justify-content: end;
-    align-items: end;
+    //align-items: end;
 
     pointer-events: none;
 
-    .overlay-content {
+    float: left;
+    position: absolute;
+    height: 400px;
+    width: 320px;
+    border: solid 1.5px lightgray;
+
+
+    right: 0;
+    bottom: 0;
+    margin-left: 100px;
+
+        .overlay-content {
       color: $text-muted;
     }
+    ul{
+      list-style: none;
+    }
+    .markdown-help{
+      text-align: center;
+      padding: 0.3em;
+    }
   }
 }