ajaxray · February 7, 2023 20:03 · Feb 7, 2023
diff --git a/slatedocs_middle_clumn_code.md b/slatedocs_middle_clumn_code.md
@@ -0,0 +1,30 @@
+Showing multiline code or JSON in the middle column of slatedocs/slate API Documentation
+==========
+
+Slate comes with 3 built in aside class (i.e. notice, warning and success) for showing blocked notes.
+
+Let's a new aside class `pre`, that will show preformatted code in the middle column.
+
+At the end of `source/stylesheets/screen.css.scss`, add the following lines:
+```css
+// Style an aside like <pre> to show code in middle column
+aside.pre {
+  font-family: monospace;
+  white-space: pre;
+  background: #f0f0f0;
+  padding-top: 0;
+}
+```
+
+Now can use this class to show preformatted text in middle column like this:
+```html
+<aside class="pre">
+{
+    "status": "completed",
+    "is_anonymous": false
+}
+</aside>
+```
+It'll be displayed like this:
+
+<img width="820" alt="image" src="https://user-images.githubusercontent.com/439612/217352420-77a6baa4-80f8-40e0-b859-7eaff0187292.png">