fix line breaks in html demo

MakeSchool · May 10, 2021 · abd614d · abd614d
1 parent 921c752
commit abd614d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/T002-HTML-syntax/p001-Intro.mdx b/T002-HTML-syntax/p001-Intro.mdx
@@ -208,14 +208,21 @@ shows a number next to each list item.
 
 Last, the element that makes the web different from other kinds of documents: the link.
 
+<!-- prettier-ignore-start -->
+<!-- (otherwise, prettier will try to make the <a> example below fit on one line) -->
+
 <HtmlDemo>
 
 ```html
-<a href="https://www.nngroup.com/articles/hypertext-history/">The History of HyperText </a>
+<a href="https://www.nngroup.com/articles/hypertext-history/">
+  The History of HyperText
+</a>
 ```
 
 </HtmlDemo>
 
+<!-- prettier-ignore-end -->
+
 The `a` stands for "anchor", which is a weird word for a link! Even weirder is `href`, the attribute
 that tells the browser where to go when you click. It stands for "Hypertext reference". It's a
 _reference_ - a pointer - to some other HyperText.

diff --git a/demo.module.css b/demo.module.css
@@ -40,14 +40,18 @@
   max-height: 230px;
   /*
   these !important declarations
-  are to override inline styles in the code highlighter
+  override inline styles in the code highlighter
   they are scoped to this css module, at least
   */
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   white-space: pre-wrap !important;
 }
 
+.code code {
+  word-break: break-all !important;
+}
+
 /* language labels */
 div:global(.language-js),
 div:global(.language-html),