Distinguish output code blocks (#1611)

assets/css/content/code.css

@@ -29,3 +29,28 @@
   padding: .5em 1em;
   background-color: var(--codeBackground);
 }
+
+.content-inner pre code.output {
+  margin: 0 12px;
+}
+
+.content-inner pre code.output + .copy-button {
+  margin-right: 12px;
+}
+
+.content-inner pre code.output:before {
+  content: "Output";
+  display: block;
+  position: absolute;
+  top: -16px;
+  left: 12px;
+  padding: 2px 4px;
+  font-size: 12px;
+  font-family: var(--monoFontFamily);
+  line-height: 1;
+  color: var(--textHeaders);
+  background-color: var(--codeBackground);
+  border: 1px solid var(--codeBorder);
+  border-bottom: 0;
+  border-radius: 2px;
+}

assets/js/copy-button.js

@@ -17,7 +17,7 @@ export function initialize () {
 function addCopyButtons () {
   Array.from(qsAll('pre'))
     .filter(pre => pre.firstElementChild && pre.firstElementChild.tagName === 'CODE')
-    .forEach(pre => pre.insertAdjacentHTML('afterbegin', BUTTON))
+    .forEach(pre => pre.insertAdjacentHTML('beforeend', BUTTON))
 
   Array.from(qsAll('.copy-button')).forEach(button => {
     let timeout

lib/ex_doc/doc_ast.ex

@@ -149,6 +149,10 @@ defmodule ExDoc.DocAST do
     {"shell", ExDoc.ShellLexer, []}
   end
 
+  defp pick_language_and_lexer("output", highlight_info, _code) do
+    {"output", highlight_info.lexer, highlight_info.opts}
+  end
+
   defp pick_language_and_lexer("", highlight_info, _code) do
     {highlight_info.language_name, highlight_info.lexer, highlight_info.opts}
   end

lib/ex_doc/markdown/earmark.ex

@@ -72,6 +72,20 @@ defmodule ExDoc.Markdown.Earmark do
     []
   end
 
+  # We are matching on Livebook outputs here, because we prune comments at this point
+  defp fixup_list(
+         [
+           {:comment, _, [~s/ livebook:{"output":true} /], %{comment: true}},
+           {"pre", pre_attrs, [{"code", code_attrs, [source], code_meta}], pre_meta}
+           | ast
+         ],
+         acc
+       ) do
+    code_attrs = Enum.reject(code_attrs, &match?({"class", _}, &1))
+    new_code = {"code", [{"class", "output"} | code_attrs], [source], code_meta}
+    fixup_list([{"pre", pre_attrs, [new_code], pre_meta} | ast], acc)
+  end
+
   defp fixup_list([head | tail], acc) do
     fixed = fixup(head)
 

test/ex_doc/markdown/earmark_test.exs

@@ -41,5 +41,30 @@ defmodule ExDoc.Markdown.EarmarkTest do
                         Markdown.to_ast("{:ok, status, %MyApp.User{}} on success", [])
              end) =~ "ExDoc.Markdown.Earmark (warning)"
     end
+
+    test "rewrites livebook outputs to output code blocks" do
+      md = """
+      # Notebook
+
+      ## Example
+
+      ```elixir
+      1 + 1
+      ```
+
+      <!-- livebook:{"output":true} -->
+
+      ```
+      2
+      ```
+      """
+
+      assert Markdown.to_ast(md, []) == [
+               {:h1, [], ["Notebook"], %{}},
+               {:h2, [], ["Example"], %{}},
+               {:pre, [], [{:code, [class: "elixir"], ["1 + 1"], %{}}], %{}},
+               {:pre, [], [{:code, [class: "output"], ["2"], %{}}], %{}}
+             ]
+    end
   end
 end