fixing some css bugs (jupyter-book#188)

fixing some css bugs

Author: choldgraf

jupyter_book/book_template/_sass/components/_components.textbook__page.scss

@@ -43,7 +43,9 @@ div.highlighter-rouge {
   position: relative;
 }
 
-div.c-textbook__content > div.highlighter-rouge > div.highlight pre, div.input_area > div.highlighter-rouge > div.highlight > pre, div.output_wrapper pre {
+div.c-textbook__content > div.highlighter-rouge > div.highlight pre,
+div.input_area > div.highlighter-rouge > div.highlight > pre,
+div.output_wrapper pre {
   background-color: $color-light-gray;
   font-size: 0.9em;
   margin-bottom: $spacing-unit-small;
@@ -52,6 +54,11 @@ div.c-textbook__content > div.highlighter-rouge > div.highlight pre, div.input_a
   border: 1px solid $color-dark-gray;
 }
 
+// If we've got intentionally non-highlighted markup, make sure that the lines wrap
+pre code.language-no-highlight {
+  white-space: pre-wrap;
+}
+
 div.output_wrapper pre {
   border: 1px solid $color-light-gray !important;
   background-color: #fcfcfc !important;
@@ -65,7 +72,7 @@ div.output_wrapper pre {
 /* [5] */
 code {
   padding: 4px;
-  white-space: pre-wrap;
+  overflow-x: auto;
   @include inuit-font-size(14px);
 }
 

jupyter_book/book_template/_sass/components/_components.textbook__sidebar-right.scss

@@ -22,6 +22,7 @@ $right-sidebar-center-offset: ($page-max-width - $sidebar-width) / 2 -
 
 .sidebar__right {
     display: none;
+    overflow-x: hidden;
     @include mq($from: desktop) {
         display: block;
         width: $right-sidebar-width;
@@ -34,7 +35,6 @@ $right-sidebar-center-offset: ($page-max-width - $sidebar-width) / 2 -
         max-height: 90%; // Required for scrolling to work properly
         scrollbar-width: thin;
         direction: rtl;
-
         z-index: 1; // Keep sidebar on top of page content
     }
 

jupyter_book/book_template/content/features/limits.md

@@ -1,4 +1,10 @@
-# Push Features to the Limit
+# Demo page to showcase markdown
+
+# NOTE: None of the information on this page applies to Jupyter Books.
+
+It is taken from the Markdown
+documentation, and is meant to give an idea of how Jupyter Book renders really long pages of
+very diverse content!
 
 ## Amount of Content
 
@@ -17,20 +23,20 @@ You can play around with Markdown on our [live demo page](http://www.markdown-he
 
 (If you're not a Markdown Here user, check out the [Markdown Cheatsheet](./Markdown-Cheatsheet) that is not specific to MDH. But, really, you should also use Markdown Here, because it's awesome. http://markdown-here.com)
 
-##### Table of Contents  
-[Headers](#headers)  
-[Emphasis](#emphasis)  
-[Lists](#lists)  
-[Links](#links)  
-[Images](#images)  
-[Code and Syntax Highlighting](#code)  
-[Tables](#tables)  
-[Blockquotes](#blockquotes)  
-[Inline HTML](#html)  
-[Horizontal Rule](#hr)  
-[Line Breaks](#lines)  
-[YouTube Videos](#videos)  
-[TeX Mathematical Formulae](#tex)  
+##### Table of Contents
+[Headers](#headers)
+[Emphasis](#emphasis)
+[Lists](#lists)
+[Links](#links)
+[Images](#images)
+[Code and Syntax Highlighting](#code)
+[Tables](#tables)
+[Blockquotes](#blockquotes)
+[Inline HTML](#html)
+[Horizontal Rule](#hr)
+[Line Breaks](#lines)
+[YouTube Videos](#videos)
+[TeX Mathematical Formulae](#tex)
 
 <a name="headers"/>
 
@@ -98,11 +104,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 ```no-highlight
 1. First ordered list item
 2. Another item
-  * Unordered sub-list. 
+  * Unordered sub-list.
 1. Actual numbers don't matter, just that it's a number
   1. Ordered sub-list
-4. And another item.  
-   
+4. And another item.
+
    Some text that should be aligned with the above item.
 
 * Unordered list can use asterisks
@@ -112,11 +118,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 2. Another item
-  * Unordered sub-list. 
+  * Unordered sub-list.
 1. Actual numbers don't matter, just that it's a number
   1. Ordered sub-list
-4. And another item.  
-   
+4. And another item.
+
    Some text that should be aligned with the above item.
 
 * Unordered list can use asterisks
@@ -138,8 +144,8 @@ There are two ways to create links.
 
 Or leave it empty and use the [link text itself]
 
-URLs and URLs in angle brackets will automatically get turned into links. 
-http://www.example.com or <http://www.example.com> and sometimes 
+URLs and URLs in angle brackets will automatically get turned into links.
+http://www.example.com or <http://www.example.com> and sometimes
 example.com (but not on Github, for example).
 
 Some text to show that the reference links can follow later.
@@ -157,8 +163,8 @@ Some text to show that the reference links can follow later.
 
 Or leave it empty and use the [link text itself]
 
-URLs and URLs in angle brackets will automatically get turned into links. 
-http://www.example.com or <http://www.example.com> and sometimes 
+URLs and URLs in angle brackets will automatically get turned into links.
+http://www.example.com or <http://www.example.com> and sometimes
 example.com (but not on Github, for example).
 
 Some text to show that the reference links can follow later.
@@ -174,21 +180,21 @@ Some text to show that the reference links can follow later.
 ```no-highlight
 Here's our logo (hover to see the title text):
 
-Inline-style: 
+Inline-style:
 ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
 
-Reference-style: 
+Reference-style:
 ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
 ```
 
 Here's our logo (hover to see the title text):
 
-Inline-style: 
+Inline-style:
 ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
 
-Reference-style: 
+Reference-style:
 ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
@@ -211,14 +217,14 @@ Blocks of code are either fenced by lines with three back-ticks <code>```</code>
 var s = "JavaScript syntax highlighting";
 alert(s);
 ```
- 
+
 ```python
 s = "Python syntax highlighting"
 print s
 ```
- 
+
 ```
-No language indicated, so no syntax highlighting. 
+No language indicated, so no syntax highlighting.
 But let's throw in a &lt;b&gt;tag&lt;/b&gt;.
 ```
 </code></pre>
@@ -236,7 +242,7 @@ print s
 ```
 
 ```
-No language indicated, so no syntax highlighting in Markdown Here (varies on Github). 
+No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
 But let's throw in a <b>tag</b>.
 ```
 
@@ -290,21 +296,21 @@ Markdown | Less | Pretty
 
 Quote break.
 
-> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
 ```
 
 > Blockquotes are very handy in email to emulate reply text.
 > This line is part of the same quote.
 
 Quote break.
 
-> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
+> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
 
 <a name="html"/>
 
 ## Inline HTML
 
-You can also use raw HTML in your Markdown, and it'll mostly work pretty well. 
+You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
 
 ```no-highlight
 <dl>
@@ -362,7 +368,7 @@ Underscores
 
 ## Line Breaks
 
-My basic recommendation for learning how line breaks work is to experiment and discover -- hit &lt;Enter&gt; once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend. 
+My basic recommendation for learning how line breaks work is to experiment and discover -- hit &lt;Enter&gt; once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.
 
 Here are some things to try out:
 
@@ -379,7 +385,7 @@ Here's a line for us to start with.
 
 This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
 
-This line is also begins a separate paragraph, but...  
+This line is also begins a separate paragraph, but...
 This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
 
 (Technical note: *Markdown Here* uses GFM line breaks, so there's no need to use MD's two-space line breaks.)
@@ -392,7 +398,7 @@ They can't be added directly but you can add an image with a link to the video l
 
 ```no-highlight
 <a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
-" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
+" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
 alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
 ```
 

jupyter_book/book_template/content/features/markdown.md

@@ -8,7 +8,15 @@ The two kinds of files that contain course content are:
 Each are contained in the `content/` folder and referenced from `_data/toc.yml`.
 
 If the file is markdown, it will be copied over with front-matter YAML added so
-that Jekyll can parse it
+that Jekyll can parse it.
+
+```python
+print("Python (and any language-specific) code still works as expected")
+```
+
+```
+As does non-language code.
+```
 
 ## Sidebars with Jekyll
 

jupyter_book/build.py

@@ -198,15 +198,19 @@ def build_book(path_book, path_toc_yaml=None, config_file=None,
         else:
             prev_file_title = toc[ix_file - 1].get('title')
             url_prev_page = toc[ix_file - 1].get('url')
-            url_prev_page = _prepare_url(url_prev_page)
+            pre_external = toc[ix_file - 1].get('external', False)
+            if pre_external is False:
+                url_prev_page = _prepare_url(url_prev_page)
 
         if ix_file == len(toc) - 1:
             url_next_page = ''
             next_file_title = ''
         else:
             next_file_title = toc[ix_file + 1].get('title')
             url_next_page = toc[ix_file + 1].get('url')
-            url_next_page = _prepare_url(url_next_page)
+            next_external = toc[ix_file + 1].get('external', False)
+            if next_external is False:
+                url_next_page = _prepare_url(url_next_page)
 
         ###############################################################################
         # Get kernel name and presence of widgets from notebooks metadata

jupyter_book/tests/site/_data/toc.yml

@@ -28,6 +28,9 @@
   - title: Jupyter notebooks
     url: /tests/notebooks
     not_numbered: true
+  - title: Test external
+    url: https://github.com
+    external: true
   - title: Interactive test
     url: /tests/interactive
     not_numbered: true

jupyter_book/tests/test_create.py

@@ -218,6 +218,9 @@ def test_notebook(tmpdir):
     # No interactive outputs
     assert is_in(lines, "has_widgets: false")
 
+    # Testing external link
+    assert is_in(lines, "url: https://github.com")
+
     ###########################################
     # Testing interactive features