Document CodeBlock

rundsk · Aug 27, 2019 · 5f6cec4 · 5f6cec4
1 parent a9ef84d
commit 5f6cec4
Showing 1 changed file with 33 additions and 20 deletions.
diff --git a/docs/02_The Frontend/03_Documentation Components/Code Block/01-Readme.md b/docs/02_The Frontend/03_Documentation Components/Code Block/01-Readme.md
@@ -2,44 +2,57 @@
 
 # Examples
 
-<CodeBlock title="colors.json">{code from colors.json}</CodeBlock>
+## Basic
 
-<CodeBlock title="Example">
-{code}
+<CodeBlock>
+alert('Hello World!');
 </CodeBlock>
 
-<CodeBlock title="Example">
-  <Color color="#FF0000">Red</Color>
+```
+<CodeBlock>
+alert('Hello World!');
 </CodeBlock>
+```
 
-<CodeBlock title="Example">
-  <div>CodeBlock directly used component</div>
+## Documenting Components
+
+<CodeBlock>
+<Color color="#001dff">Blue</Color>
 </CodeBlock>
 
-<Playground>
-  <Color color="#FF0000">Red</Color>
-</Playground>
+```
+<CodeBlock>
+<Color color="#001dff">Blue</Color>
+</CodeBlock>
+```
 
 
-# Usage
+## With Title
 
-<CodeBlock title="Example">
-  <Color color="#FF0000">Red</Color>
+<CodeBlock title="fib.js">
+function fib(n) {
+  return n < 2 ? n : fib(n - 1) + fib(n - 2);
+}	
 </CodeBlock>
 
 ```
-<Color color="#FF0000">Red</Color>
+<CodeBlock title="fib.js">
+function fib(n) {
+  return n < 2 ? n : fib(n - 1) + fib(n - 2);
+}	
+</CodeBlock>
 ```
 
-<CodeBlock title="Example">
-  <div>CodeBlock directly used component</div>
-</CodeBlock>
+## Retrieving the Source from a File
+
+<CodeBlock src="./colors.json"></CodeBlock>
 
 ```
-<div>CodeBlock inside div-element from fenced Markdown code</div>
+<CodeBlock src="./colors.json"></CodeBlock>
 ```
 
+<CodeBlock src="https://gist.githubusercontent.com/adamwathan/b271d1a34f5b37b1a2ad2e844c86b329/raw/d7321013ab5a5b4469b306f3e3a73ee6c0226100/tdd-books.md"></CodeBlock>
+
 ```
-<CodeBlock src="./colors.json"></CodeBlock>
-<CodeBlock title="Example">{code}</CodeBlock>
+<CodeBlock src="https://gist.githubusercontent.com/adamwathan/b271d1a34f5b37b1a2ad2e844c86b329/raw/d7321013ab5a5b4469b306f3e3a73ee6c0226100/tdd-books.md"></CodeBlock>
 ```