Use idiomatic markdown output for code blocks (<pre><code>)

jashkenas · Dec 11, 2016 · d2b1ee7 · d2b1ee7
1 parent b2bf505
commit d2b1ee7
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 57 deletions.
diff --git a/Cakefile b/Cakefile
@@ -184,7 +184,7 @@ task 'doc:site', 'watch and continually rebuild the documentation for the websit
       if code.indexOf('codeFor(') is 0 or code.indexOf('releaseHeader(') is 0
         "<%= #{code} %>"
       else
-        "<pre>\n#{code}\n</pre>"
+        "<pre><code>#{code}</code></pre>" # Default
 
     (file, bookmark) ->
       md = fs.readFileSync "#{sectionsSourceFolder}/#{file}.md", 'utf-8'

diff --git a/docs/v1/index.html b/docs/v1/index.html
@@ -78,7 +78,11 @@
     text-align: center;
     padding: 5px 20px;
   }
-code, pre, textarea {
+blockquote {
+  margin-left: 0;
+  margin-right: 0;
+}
+code, pre, pre > code, textarea {
   font-family: Monaco, Consolas, "Lucida Console", monospace;
   font-size: 12px;
   line-height: 18px;
@@ -92,16 +96,12 @@
     border: 1px solid #dedede;
     padding: 0px 0.2em;
   }
-  pre {
+  blockquote > pre {
+    margin: 0;
     border-left: 5px solid rgba(0,0,0,0.2);
     padding: 3px 0 3px 12px;
     font-size: 12px;
   }
-    pre.no_bar {
-      border-left: 0;
-      margin-left: 0;
-      padding-left: 0;
-    }
 .timestamp {
   font-size: 11px;
   font-weight: normal;
@@ -496,12 +496,6 @@
   color: #21439C;
 }
 
-pre code {
-  display: block;
-  background: white;
-  color: #000000;
-}
-
 pre .coffeescript .javascript,
 pre .javascript .xml,
 pre .tex .formula,
@@ -612,9 +606,9 @@
 <p>The golden rule of CoffeeScript is: <em>“It’s just JavaScript”</em>. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable, pretty-printed, and tends to run as fast or faster than the equivalent handwritten JavaScript.</p>
 <p>The CoffeeScript compiler goes to great lengths to generate output JavaScript that runs in every JavaScript runtime, but there are exceptions. Use <a href="#generator-functions">generator functions</a>, <a href="#generator-iteration"><code>for…from</code></a>, or <a href="#tagged-template-literals">tagged template literals</a> only if you know that your <a href="http://kangax.github.io/compat-table/es6/">target runtimes can support them</a>. If you use <a href="#modules">modules</a>, you will need to <a href="#modules-note">use an additional tool to resolve them</a>.</p>
 <p><strong>Latest Version:</strong> <a href="http://github.com/jashkenas/coffeescript/tarball/1.12.1">1.12.1</a></p>
-<pre>
-npm install -g coffee-script
-</pre>
+<blockquote>
+<pre><code>npm install -g coffee-script</code></pre></blockquote>
+
   <span class="bookmark" id="overview"></span>
 
 <h2 id="overview">Overview</h2>
@@ -741,18 +735,10 @@ <h2 id="overview">Overview</h2>
 <h2 id="installation">Installation</h2>
 <p>The CoffeeScript compiler is itself <a href="v1/annotated-source/grammar.html">written in CoffeeScript</a>, using the <a href="http://jison.org">Jison parser generator</a>. The command-line version of <code>coffee</code> is available as a <a href="http://nodejs.org/">Node.js</a> utility. The <a href="v1/browser-compiler/coffee-script.js">core compiler</a> however, does not depend on Node, and can be run in any JavaScript environment, or in the browser (see “Try CoffeeScript”, above).</p>
 <p>To install, first make sure you have a working copy of the latest stable version of <a href="http://nodejs.org/">Node.js</a>. You can then install CoffeeScript globally with <a href="http://npmjs.org">npm</a>:</p>
-<pre>
-npm install -g coffee-script
-</pre><p>When you need CoffeeScript as a dependency, install it locally:</p>
-<pre>
-npm install --save coffee-script
-</pre><p>If you’d prefer to install the latest <strong>master</strong> version of CoffeeScript, you can clone the CoffeeScript <a href="http://github.com/jashkenas/coffeescript">source repository</a> from GitHub, or download <a href="http://github.com/jashkenas/coffeescript/tarball/master">the source</a> directly. To install the latest master CoffeeScript compiler with npm:</p>
-<pre>
-npm install -g jashkenas/coffeescript
-</pre><p>Or, if you want to install to <code>/usr/local</code>, and don’t want to use npm to manage it, open the <code>coffee-script</code> directory and run:</p>
-<pre>
-sudo bin/cake install
-</pre>
+<pre><code>npm install -g coffee-script</code></pre><p>When you need CoffeeScript as a dependency, install it locally:</p>
+<pre><code>npm install --save coffee-script</code></pre><p>If you’d prefer to install the latest <strong>master</strong> version of CoffeeScript, you can clone the CoffeeScript <a href="http://github.com/jashkenas/coffeescript">source repository</a> from GitHub, or download <a href="http://github.com/jashkenas/coffeescript/tarball/master">the source</a> directly. To install the latest master CoffeeScript compiler with npm:</p>
+<pre><code>npm install -g jashkenas/coffeescript</code></pre><p>Or, if you want to install to <code>/usr/local</code>, and don’t want to use npm to manage it, open the <code>coffee-script</code> directory and run:</p>
+<pre><code>sudo bin/cake install</code></pre>
   <span class="bookmark" id="usage"></span>
 
 <h2 id="usage">Usage</h2>
@@ -880,18 +866,17 @@ <h2 id="usage">Usage</h2>
 
 <td><code>-n, --nodes</code></td>
 
-<td>Instead of compiling the CoffeeScript, just lex and parse it, and print out the parse tree:
+<td>Instead of compiling the CoffeeScript, just lex and parse it, and print out the parse tree:<br>
 
-<pre class="no_bar">Block
+<code>Block
   Assign
     Value IdentifierLiteral: square
     Code
       Param IdentifierLiteral: x
       Block
         Op *
           Value IdentifierLiteral: x
-          Value IdentifierLiteral: x</pre>
-
+          Value IdentifierLiteral: x</code>
 </td>
 
 </tr>
@@ -2737,13 +2722,12 @@ <h2 class="header">
 <ul>
 <li><code>yield return</code> can no longer mistakenly be used as an expression.</li>
 <li><p><code>yield</code> now mirrors <code>return</code> in that it can be used stand-alone as well as with expressions. Where you previously wrote <code>yield undefined</code>, you may now write simply <code>yield</code>. However, this means also inheriting the same syntax limitations that <code>return</code> has, so these examples no longer compile:</p>
-<pre class="no_bar">doubles = ->
+<pre><code>doubles = ->
   yield for i in [1..3]
     i * 2
 six = ->
   yield
-    2 * 3</pre>
-</li>
+    2 * 3</code></pre></li>
 <li><p>The JavaScript output is a bit nicer, with unnecessary parentheses and spaces, double indentation and double semicolons around <code>yield</code> no longer present.</p>
 </li>
 </ul>

diff --git a/documentation/sections/changelog.md b/documentation/sections/changelog.md
@@ -39,13 +39,14 @@ releaseHeader('2016-09-24', '1.11.0', '1.10.0')
 
     *   `yield return` can no longer mistakenly be used as an expression.
     *   `yield` now mirrors `return` in that it can be used stand-alone as well as with expressions. Where you previously wrote `yield undefined`, you may now write simply `yield`. However, this means also inheriting the same syntax limitations that `return` has, so these examples no longer compile:
-
-        <pre class="no_bar">doubles = ->
+        ```
+        doubles = ->
           yield for i in [1..3]
             i * 2
         six = ->
           yield
-            2 * 3</pre>
+            2 * 3
+        ```
 
     *   The JavaScript output is a bit nicer, with unnecessary parentheses and spaces, double indentation and double semicolons around `yield` no longer present.
 *   `&&=`, `||=`, `and=` and `or=` no longer accidentally allow a space before the equals sign.

diff --git a/documentation/sections/introduction.md b/documentation/sections/introduction.md
@@ -6,6 +6,6 @@ The CoffeeScript compiler goes to great lengths to generate output JavaScript th
 
 **Latest Version:** [<%= fullVersion %>](http://github.com/jashkenas/coffeescript/tarball/<%= fullVersion %>)
 
-```
+> ```
 npm install -g coffee-script
 ```
diff --git a/documentation/sections/usage.md b/documentation/sections/usage.md
@@ -125,18 +125,19 @@ Once installed, you should have access to the `coffee` command, which can execut
 
 <td>`-n, --nodes`</td>
 
-<td>Instead of compiling the CoffeeScript, just lex and parse it, and print out the parse tree:
+<td>Instead of compiling the CoffeeScript, just lex and parse it, and print out the parse tree:<br>
 
-<pre class="no_bar">Block
+```
+Block
   Assign
     Value IdentifierLiteral: square
     Code
       Param IdentifierLiteral: x
       Block
         Op *
           Value IdentifierLiteral: x
-          Value IdentifierLiteral: x</pre>
-
+          Value IdentifierLiteral: x
+```
 </td>
 
 </tr>

diff --git a/documentation/v1/docs.css b/documentation/v1/docs.css
@@ -62,7 +62,11 @@ table.definitions {
     text-align: center;
     padding: 5px 20px;
   }
-code, pre, textarea {
+blockquote {
+  margin-left: 0;
+  margin-right: 0;
+}
+code, pre, pre > code, textarea {
   font-family: Monaco, Consolas, "Lucida Console", monospace;
   font-size: 12px;
   line-height: 18px;
@@ -76,16 +80,12 @@ code, pre, textarea {
     border: 1px solid #dedede;
     padding: 0px 0.2em;
   }
-  pre {
+  blockquote > pre {
+    margin: 0;
     border-left: 5px solid rgba(0,0,0,0.2);
     padding: 3px 0 3px 12px;
     font-size: 12px;
   }
-    pre.no_bar {
-      border-left: 0;
-      margin-left: 0;
-      padding-left: 0;
-    }
 .timestamp {
   font-size: 11px;
   font-weight: normal;

diff --git a/documentation/v1/tomorrow.css b/documentation/v1/tomorrow.css
@@ -49,12 +49,6 @@ pre .class .title {
   color: #21439C;
 }
 
-pre code {
-  display: block;
-  background: white;
-  color: #000000;
-}
-
 pre .coffeescript .javascript,
 pre .javascript .xml,
 pre .tex .formula,