diff --git a/packages/code-surfer/src/code-surfer.js b/packages/code-surfer/src/code-surfer.js
index 37845e53..8ba10c2c 100644
--- a/packages/code-surfer/src/code-surfer.js
+++ b/packages/code-surfer/src/code-surfer.js
@@ -44,36 +44,44 @@ const CodeSurfer = ({
           })}
         >
           <Scroller.Content type="code" style={{ fontFamily: monospace }}>
-            {tokens.map((line, i) => (
-              <div {...getLineProps({ line, key: i })}>
-                {showNumbers && (
-                  <span
-                    className={
-                      "token comment " +
-                      (selectedTokens.isLineSelected(i)
-                        ? selectedRules
-                        : unselectedRules)
-                    }
-                    style={{ userSelect: "none" }}
-                  >
-                    {(i + 1 + ".").padStart(3)}{" "}
-                  </span>
-                )}
-                {line.map((token, key) => (
-                  <Scroller.Element
-                    type="span"
-                    {...getTokenProps({
-                      token,
-                      key,
-                      selected: selectedTokens.isTokenSelected(i, key),
-                      className: selectedTokens.isTokenSelected(i, key)
-                        ? selectedRules
-                        : unselectedRules
-                    })}
-                  />
-                ))}
-              </div>
-            ))}
+            {tokens.map((line, i) => {
+              const lineNumber = i + 1;
+              return (
+                <div {...getLineProps({ line, key: i })}>
+                  {showNumbers && (
+                    <span
+                      className={
+                        "token comment " +
+                        (selectedTokens.isLineSelected(i)
+                          ? selectedRules
+                          : unselectedRules)
+                      }
+                      style={{ userSelect: "none" }}
+                    >
+                      {(lineNumber + ".").padStart(3)}{" "}
+                    </span>
+                  )}
+                  {line.map((token, key) => (
+                    <Scroller.Element
+                      type="span"
+                      {...getTokenProps({
+                        token,
+                        key,
+                        selected: selectedTokens.isTokenSelected(i, key),
+                        className: selectedTokens.isTokenSelected(i, key)
+                          ? selectedRules
+                          : unselectedRules
+                      })}
+                    />
+                  ))}
+                  {step.lineAnnotations && step.lineAnnotations[lineNumber]
+                    ? typeof step.lineAnnotations[lineNumber] === "function"
+                      ? step.lineAnnotations[lineNumber]()
+                      : step.lineAnnotations[lineNumber]
+                    : null}
+                </div>
+              );
+            })}
           </Scroller.Content>
         </Scroller.Container>
       )}
diff --git a/packages/code-surfer/src/step-parser.js b/packages/code-surfer/src/step-parser.js
index 2b9b5fb8..6a91df76 100644
--- a/packages/code-surfer/src/step-parser.js
+++ b/packages/code-surfer/src/step-parser.js
@@ -67,7 +67,10 @@ const getTokensPerLineFromString = step => {
 export const mapStep = step => {
   if (typeof step === "string") {
     return getTokensPerLineFromString(step);
-  } else if (Object.keys(step).length === 0) {
+  } else if (
+    Object.keys(step).length === 0 ||
+    (Object.keys(step).length === 1 && step.lineAnnotations)
+  ) {
     return { all: true };
   } else {
     return getTokensPerLineFromObject(step);