tidy AsciiDoc playground

- remove outline on focus
- extend editor to bottom of area
- update AsciiDoc to align with best practices
- minor edit to comparison description for DITA

pages/assets/css/_base.css

@@ -462,6 +462,7 @@ section.try .toggle {
 
 #editorCode {
   color: var(--gray-color-600);
+  display: flex;
   font-size: 1rem;
   min-height: 300px;
 }
@@ -470,6 +471,10 @@ section.try .toggle {
   max-height: 340px;
 }
 
+#editorCode .cm-editor.cm-focused {
+  outline: none;
+}
+
 #editorCode .cm-scroller {
   border-radius: 5px;
 }

pages/assets/js/interactive-editor.js

@@ -19,8 +19,10 @@ An introduction to https://asciidoc.org[AsciiDoc].
 * item 1
 * item 2
 
-[source,ruby]
-puts 'Hello, World!'`
+[,ruby]
+----
+puts 'Hello, World!'
+----`
 
   const editor = document.getElementById('editorCode')
   const editorPreview = document.getElementById('editorPreview')

pages/index.adoc

@@ -89,8 +89,6 @@ image::./assets/img/man-page-git-for-each-ref.png[]
 AsciiDoc was designed to strike a balance between a formalized, machine-oriented syntax and raw text with shorthands.
 In fact, it's able to capture and encode nearly all of the semantics of a formalized language while still looking mostly like raw text.
 
-
-
 [#compare.compare,separator=?]
 == How does it stack up? Compare AsciiDoc against alternative document formats
 
@@ -187,7 +185,7 @@ include::{includedir}/dita-sample.dita[]
 DITA is an **XML schema** for representing a broad range of information.
 Its architecture encourages **content modularity** and reuse, **portable references**, and **controlled extension** of its vocabulary.
 These goals are met using a **complex system** of XML tags, concepts, and toolchains.
-DITA's complexity means it has a substantial learning curve and it's **sparsely supported**.
+DITA's complexity means it has a substantial learning curve and is **sparsely supported**.
 
 .index.adoc
 [.editor,asciidoc]