From 01333176f5feeb461979c7002b89c8cb4e473604 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Wed, 21 Oct 2020 12:23:38 +0200
Subject: [PATCH] update storyshots

---
 .../src/__snapshots__/storyshots.test.ts.snap | 2601 +++++++++++------
 1 file changed, 1648 insertions(+), 953 deletions(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 690b599378..06e6ae59b1 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -39,6 +39,7 @@ exports[`Storyshots Annotate Default 1`] = `
       }
     >
       <code
+        className="language-go"
         style={
           Object {
             "MozHyphens": "none",
@@ -591,6 +592,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
       }
     >
       <code
+        className="language-go"
         style={
           Object {
             "MozHyphens": "none",
@@ -45616,6 +45618,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
         }
       >
         <code
+          className="language-text"
           style={
             Object {
               "MozHyphens": "none",
@@ -45638,39 +45641,21 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
             }
           }
         >
-          <code
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
             style={
               Object {
-                "MozHyphens": "none",
-                "MozTabSize": "4",
-                "OTabSize": "4",
-                "WebkitHyphens": "none",
-                "color": "#363636",
-                "direction": "ltr",
-                "float": "left",
-                "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-                "fontSize": "13px",
-                "hyphens": "none",
-                "lineHeight": "1.5",
-                "msHyphens": "none",
-                "paddingRight": "10px",
-                "tabSize": "4",
-                "textAlign": "left",
-                "textShadow": "none",
-                "whiteSpace": "pre",
-                "wordBreak": "normal",
-                "wordSpacing": "normal",
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "1em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
               }
             }
           >
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              1
-
-            </span>
-          </code>
+            1
+          </span>
           <span
             style={Object {}}
           >
@@ -46539,6 +46524,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
           </span>
         </code>
         <code
+          className="language-go"
           style={
             Object {
               "MozHyphens": "none",
@@ -46848,6 +46834,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
         }
       >
         <code
+          className="language-xml"
           style={
             Object {
               "MozHyphens": "none",
@@ -46870,195 +46857,23 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             }
           }
         >
-          <code
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
             style={
               Object {
-                "MozHyphens": "none",
-                "MozTabSize": "4",
-                "OTabSize": "4",
-                "WebkitHyphens": "none",
-                "color": "#363636",
-                "direction": "ltr",
-                "float": "left",
-                "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-                "fontSize": "13px",
-                "hyphens": "none",
-                "lineHeight": "1.5",
-                "msHyphens": "none",
-                "paddingRight": "10px",
-                "tabSize": "4",
-                "textAlign": "left",
-                "textShadow": "none",
-                "whiteSpace": "pre",
-                "wordBreak": "normal",
-                "wordSpacing": "normal",
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
               }
             }
           >
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              1
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              2
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              3
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              4
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              5
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              6
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              7
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              8
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              9
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              10
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              11
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              12
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              13
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              14
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              15
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              16
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              17
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              18
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              19
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              20
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              21
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              22
-
-            </span>
-            <span
-              className="react-syntax-highlighter-line-number"
-              style={Object {}}
-            >
-              23
-
-            </span>
-          </code>
+            1
+          </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47068,7 +46883,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47088,7 +46903,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
              
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#cca201",
@@ -47098,7 +46913,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             [...]
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47113,19 +46928,79 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             
 
           </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            2
+          </span>
           
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            3
+          </span>
             [...]
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            4
+          </span>
           
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            5
+          </span>
           <span
             style={Object {}}
           >
               
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47135,7 +47010,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47145,7 +47020,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             build
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47159,6 +47034,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            6
           </span>
           <span
             style={Object {}}
@@ -47166,7 +47056,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                 
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47176,7 +47066,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47186,7 +47076,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             plugins
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47201,19 +47091,79 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             
 
           </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            7
+          </span>
           
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            8
+          </span>
                 [...]
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            9
+          </span>
           
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            10
+          </span>
           <span
             style={Object {}}
           >
                   
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47223,7 +47173,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47233,7 +47183,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             plugin
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47247,6 +47197,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            11
           </span>
           <span
             style={Object {}}
@@ -47254,7 +47219,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                     
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47264,7 +47229,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47274,7 +47239,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             groupId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47289,7 +47254,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             org.apache.maven.plugins
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47299,7 +47264,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47309,7 +47274,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             groupId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47323,6 +47288,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            12
           </span>
           <span
             style={Object {}}
@@ -47330,7 +47310,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                     
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47340,7 +47320,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47350,7 +47330,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             artifactId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47365,7 +47345,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             maven-enforcer-plugin
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47375,7 +47355,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47385,7 +47365,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             artifactId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47399,6 +47379,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            13
           </span>
           <span
             style={Object {}}
@@ -47406,7 +47401,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                   
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47416,7 +47411,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47426,7 +47421,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             plugin
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47440,6 +47435,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            14
           </span>
           <span
             style={Object {}}
@@ -47447,7 +47457,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                   
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47457,7 +47467,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47467,7 +47477,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             plugin
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47481,6 +47491,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            15
           </span>
           <span
             style={Object {}}
@@ -47488,7 +47513,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                     
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47498,7 +47523,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47508,7 +47533,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             groupId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47523,7 +47548,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             org.codehaus.mojo
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47533,7 +47558,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47543,7 +47568,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             groupId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47557,6 +47582,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            16
           </span>
           <span
             style={Object {}}
@@ -47564,7 +47604,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                     
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47574,7 +47614,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47584,7 +47624,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             artifactId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47599,7 +47639,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             animal-sniffer-maven-plugin
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47609,7 +47649,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47619,7 +47659,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             artifactId
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47633,6 +47673,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            17
           </span>
           <span
             style={Object {}}
@@ -47640,7 +47695,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                   
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47650,7 +47705,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47660,7 +47715,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             plugin
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47674,6 +47729,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            18
           </span>
           <span
             style={Object {}}
@@ -47681,7 +47751,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                 
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47691,7 +47761,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47701,7 +47771,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             plugins
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47715,6 +47785,21 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           >
             
 
+          </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            19
           </span>
           <span
             style={Object {}}
@@ -47722,7 +47807,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
               
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47732,7 +47817,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47742,7 +47827,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             build
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47757,19 +47842,79 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             
 
           </span>
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            20
+          </span>
           
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            21
+          </span>
             [...]
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            22
+          </span>
           
 
+          <span
+            className="linenumber react-syntax-highlighter-line-number"
+            style={
+              Object {
+                "color": "#9a9a9a",
+                "display": "inline-block",
+                "minWidth": "2em",
+                "paddingRight": "1em",
+                "textAlign": "right",
+                "userSelect": "none",
+              }
+            }
+          >
+            23
+          </span>
           <span
             style={Object {}}
           >
             
           </span>
           <span
-            className="token token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -47779,7 +47924,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             &lt;/
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#2c99c7",
@@ -47789,7 +47934,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
             project
           </span>
           <span
-            className="token token"
+            className="token"
             style={
               Object {
                 "color": "#9a9a9a",
@@ -48776,6 +48921,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
     }
   >
     <code
+      className="language-go"
       style={
         Object {
           "MozHyphens": "none",
@@ -48798,151 +48944,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
         }
       }
     >
-      <code
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
         style={
           Object {
-            "MozHyphens": "none",
-            "MozTabSize": "4",
-            "OTabSize": "4",
-            "WebkitHyphens": "none",
-            "color": "#363636",
-            "direction": "ltr",
-            "float": "left",
-            "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-            "fontSize": "13px",
-            "hyphens": "none",
-            "lineHeight": "1.5",
-            "msHyphens": "none",
-            "paddingRight": "10px",
-            "tabSize": "4",
-            "textAlign": "left",
-            "textShadow": "none",
-            "whiteSpace": "pre",
-            "wordBreak": "normal",
-            "wordSpacing": "normal",
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
           }
         }
       >
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          1
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          2
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          3
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          4
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          5
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          6
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          7
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          8
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          9
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          10
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          11
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          12
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          13
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          14
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          15
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          16
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          17
-
-        </span>
-      </code>
+        1
+      </span>
       <span
         className="token"
         style={
@@ -48959,8 +48975,38 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
          main
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        2
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        3
+      </span>
       <span
         style={Object {}}
       >
@@ -48996,6 +49042,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        4
       </span>
       <span
         style={Object {}}
@@ -49017,6 +49078,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        5
       </span>
       <span
         style={Object {}}
@@ -49038,6 +49114,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        6
       </span>
       <span
         style={Object {}}
@@ -49060,8 +49151,38 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        7
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        8
+      </span>
       <span
         style={Object {}}
       >
@@ -49132,6 +49253,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        9
       </span>
       <span
         style={Object {}}
@@ -49257,7 +49393,6 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -49314,6 +49449,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        10
       </span>
       <span
         style={Object {}}
@@ -49395,6 +49545,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        11
       </span>
       <span
         style={Object {}}
@@ -49427,8 +49592,38 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        12
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        13
+      </span>
       <span
         style={Object {}}
       >
@@ -49438,7 +49633,6 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -49550,6 +49744,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        14
       </span>
       <span
         style={Object {}}
@@ -49692,8 +49901,38 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        15
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        16
+      </span>
       <span
         style={Object {}}
       >
@@ -49779,6 +50018,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        17
       </span>
       <span
         style={Object {}}
@@ -49801,6 +50055,21 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        18
+      </span>
       
 
     </code>
@@ -49840,6 +50109,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
     }
   >
     <code
+      className="language-java"
       style={
         Object {
           "MozHyphens": "none",
@@ -49862,249 +50132,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         }
       }
     >
-      <code
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
         style={
           Object {
-            "MozHyphens": "none",
-            "MozTabSize": "4",
-            "OTabSize": "4",
-            "WebkitHyphens": "none",
-            "color": "#363636",
-            "direction": "ltr",
-            "float": "left",
-            "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-            "fontSize": "13px",
-            "hyphens": "none",
-            "lineHeight": "1.5",
-            "msHyphens": "none",
-            "paddingRight": "10px",
-            "tabSize": "4",
-            "textAlign": "left",
-            "textShadow": "none",
-            "whiteSpace": "pre",
-            "wordBreak": "normal",
-            "wordSpacing": "normal",
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
           }
         }
       >
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          1
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          2
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          3
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          4
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          5
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          6
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          7
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          8
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          9
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          10
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          11
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          12
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          13
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          14
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          15
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          16
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          17
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          18
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          19
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          20
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          21
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          22
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          23
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          24
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          25
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          26
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          27
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          28
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          29
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          30
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          31
-
-        </span>
-      </code>
+        1
+      </span>
       <span
         className="token"
         style={
@@ -50121,13 +50163,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50137,7 +50179,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         example
@@ -50158,8 +50200,38 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        2
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        3
+      </span>
       <span
         style={Object {}}
       >
@@ -50181,13 +50253,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         java
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50197,7 +50269,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         io
@@ -50233,6 +50305,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        4
       </span>
       <span
         style={Object {}}
@@ -50255,13 +50342,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         java
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50271,7 +50358,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         io
@@ -50307,6 +50394,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        5
       </span>
       <span
         style={Object {}}
@@ -50329,13 +50431,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         java
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50345,7 +50447,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
@@ -50382,8 +50484,38 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        6
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        7
+      </span>
       <span
         style={Object {}}
       >
@@ -50405,13 +50537,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50421,13 +50553,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         sun
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50437,13 +50569,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50453,7 +50585,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         httpserver
@@ -50489,6 +50621,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        8
       </span>
       <span
         style={Object {}}
@@ -50511,13 +50658,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50527,13 +50674,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         sun
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50543,13 +50690,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50559,7 +50706,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         httpserver
@@ -50595,6 +50742,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        9
       </span>
       <span
         style={Object {}}
@@ -50617,13 +50779,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50633,13 +50795,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         sun
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50649,13 +50811,13 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -50665,7 +50827,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         httpserver
@@ -50702,8 +50864,38 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        10
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        11
+      </span>
       <span
         style={Object {}}
       >
@@ -50766,8 +50958,38 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        12
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        13
+      </span>
       <span
         style={Object {}}
       >
@@ -50925,6 +51147,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        14
       </span>
       <span
         style={Object {}}
@@ -50946,7 +51183,6 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -51095,6 +51331,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        15
       </span>
       <span
         style={Object {}}
@@ -51222,6 +51473,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        16
       </span>
       <span
         style={Object {}}
@@ -51308,6 +51574,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        17
       </span>
       <span
         style={Object {}}
@@ -51369,6 +51650,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        18
       </span>
       <span
         style={Object {}}
@@ -51391,8 +51687,38 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        19
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        20
+      </span>
       <span
         style={Object {}}
       >
@@ -51480,6 +51806,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        21
       </span>
       <span
         style={Object {}}
@@ -51501,6 +51842,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        22
       </span>
       <span
         style={Object {}}
@@ -51624,6 +51980,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        23
       </span>
       <span
         style={Object {}}
@@ -51645,7 +52016,6 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -51682,6 +52052,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        24
       </span>
       <span
         style={Object {}}
@@ -51808,6 +52193,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        25
       </span>
       <span
         style={Object {}}
@@ -51829,7 +52229,6 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -51896,6 +52295,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        26
       </span>
       <span
         style={Object {}}
@@ -52002,6 +52416,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        27
       </span>
       <span
         style={Object {}}
@@ -52063,6 +52492,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        28
       </span>
       <span
         style={Object {}}
@@ -52084,6 +52528,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        29
       </span>
       <span
         style={Object {}}
@@ -52106,8 +52565,38 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        30
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        31
+      </span>
       <span
         style={Object {}}
       >
@@ -52129,6 +52618,21 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "3em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        32
+      </span>
       
 
     </code>
@@ -52168,6 +52672,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
     }
   >
     <code
+      className="language-javascript"
       style={
         Object {
           "MozHyphens": "none",
@@ -52190,81 +52695,21 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
         }
       }
     >
-      <code
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
         style={
           Object {
-            "MozHyphens": "none",
-            "MozTabSize": "4",
-            "OTabSize": "4",
-            "WebkitHyphens": "none",
-            "color": "#363636",
-            "direction": "ltr",
-            "float": "left",
-            "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-            "fontSize": "13px",
-            "hyphens": "none",
-            "lineHeight": "1.5",
-            "msHyphens": "none",
-            "paddingRight": "10px",
-            "tabSize": "4",
-            "textAlign": "left",
-            "textShadow": "none",
-            "whiteSpace": "pre",
-            "wordBreak": "normal",
-            "wordSpacing": "normal",
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
           }
         }
       >
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          1
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          2
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          3
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          4
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          5
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          6
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          7
-
-        </span>
-      </code>
+        1
+      </span>
       <span
         className="token"
         style={
@@ -52284,7 +52729,6 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -52352,8 +52796,38 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        2
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        3
+      </span>
       <span
         style={Object {}}
       >
@@ -52421,7 +52895,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
         req
       </span>
       <span
-        className="token parameter token"
+        className="token parameter"
         style={
           Object {
             "color": "#9a9a9a",
@@ -52466,6 +52940,21 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        4
       </span>
       <span
         style={Object {}}
@@ -52551,7 +53040,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
         className="token"
         style={
           Object {
-            "color": "#9a9a9a",
+            "color": "#686868",
           }
         }
       >
@@ -52607,6 +53096,21 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        5
       </span>
       <span
         style={Object {}}
@@ -52678,6 +53182,21 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        6
       </span>
       <span
         style={Object {}}
@@ -52739,6 +53258,21 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        7
       </span>
       <span
         style={Object {}}
@@ -52831,6 +53365,21 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        8
+      </span>
       
 
     </code>
@@ -52870,6 +53419,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
     }
   >
     <code
+      className="language-python"
       style={
         Object {
           "MozHyphens": "none",
@@ -52892,172 +53442,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         }
       }
     >
-      <code
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
         style={
           Object {
-            "MozHyphens": "none",
-            "MozTabSize": "4",
-            "OTabSize": "4",
-            "WebkitHyphens": "none",
-            "color": "#363636",
-            "direction": "ltr",
-            "float": "left",
-            "fontFamily": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-            "fontSize": "13px",
-            "hyphens": "none",
-            "lineHeight": "1.5",
-            "msHyphens": "none",
-            "paddingRight": "10px",
-            "tabSize": "4",
-            "textAlign": "left",
-            "textShadow": "none",
-            "whiteSpace": "pre",
-            "wordBreak": "normal",
-            "wordSpacing": "normal",
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
           }
         }
       >
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          1
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          2
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          3
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          4
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          5
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          6
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          7
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          8
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          9
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          10
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          11
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          12
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          13
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          14
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          15
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          16
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          17
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          18
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          19
-
-        </span>
-        <span
-          className="react-syntax-highlighter-line-number"
-          style={Object {}}
-        >
-          20
-
-        </span>
-      </code>
+        1
+      </span>
       <span
         className="token"
         style={
@@ -53104,8 +53503,38 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         HTTPServer
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        2
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        3
+      </span>
       <span
         style={Object {}}
       >
@@ -53115,7 +53544,6 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -53143,8 +53571,38 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        4
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        5
+      </span>
       <span
         style={Object {}}
       >
@@ -53212,8 +53670,38 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        6
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        7
+      </span>
       <span
         style={Object {}}
       >
@@ -53284,6 +53772,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        8
       </span>
       <span
         style={Object {}}
@@ -53340,6 +53843,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        9
       </span>
       <span
         style={Object {}}
@@ -53416,6 +53934,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        10
       </span>
       <span
         style={Object {}}
@@ -53462,6 +53995,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        11
       </span>
       <span
         style={Object {}}
@@ -53533,6 +54081,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        12
       </span>
       <span
         style={Object {}}
@@ -53555,8 +54118,38 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        13
+      </span>
       
 
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        14
+      </span>
       <span
         style={Object {}}
       >
@@ -53587,6 +54180,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        15
       </span>
       <span
         style={Object {}}
@@ -53597,7 +54205,6 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -53694,6 +54301,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        16
       </span>
       <span
         style={Object {}}
@@ -53746,6 +54368,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
          PORT_NUMBER
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        17
+      </span>
       <span
         style={Object {}}
       >
@@ -53791,6 +54428,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        18
       </span>
       <span
         style={Object {}}
@@ -53827,6 +54479,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        19
       </span>
       <span
         style={Object {}}
@@ -53863,6 +54530,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       >
         
 
+      </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        20
       </span>
       <span
         style={Object {}}
@@ -53925,6 +54607,21 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
         
 
       </span>
+      <span
+        className="linenumber react-syntax-highlighter-line-number"
+        style={
+          Object {
+            "color": "#9a9a9a",
+            "display": "inline-block",
+            "minWidth": "2em",
+            "paddingRight": "1em",
+            "textAlign": "right",
+            "userSelect": "none",
+          }
+        }
+      >
+        21
+      </span>
       
 
     </code>
@@ -53964,6 +54661,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
     }
   >
     <code
+      className="language-java"
       style={
         Object {
           "MozHyphens": "none",
@@ -54002,13 +54700,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54018,7 +54716,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         example
@@ -54062,13 +54760,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         java
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54078,7 +54776,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         io
@@ -54136,13 +54834,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         java
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54152,7 +54850,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         io
@@ -54210,13 +54908,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         java
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54226,7 +54924,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
@@ -54286,13 +54984,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54302,13 +55000,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         sun
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54318,13 +55016,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54334,7 +55032,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         httpserver
@@ -54392,13 +55090,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54408,13 +55106,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         sun
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54424,13 +55122,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54440,7 +55138,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         httpserver
@@ -54498,13 +55196,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
          
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         com
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54514,13 +55212,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         sun
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54530,13 +55228,13 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         net
       </span>
       <span
-        className="token namespace token"
+        className="token"
         style={
           Object {
             "color": "#9a9a9a",
@@ -54546,7 +55244,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         .
       </span>
       <span
-        className="token namespace"
+        className="token"
         style={Object {}}
       >
         httpserver
@@ -54827,7 +55525,6 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -55526,7 +56223,6 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }
@@ -55710,7 +56406,6 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
         className="token"
         style={
           Object {
-            "background": "#ffffff",
             "color": "#686868",
           }
         }