Text Styling¶
Headings¶
# for titles## for major headings### for subheadings#### for 4th level subheadingsBullets¶
- stuff you want to write
- a hyphen followed by a space makes a nice bullet
Block Quoting or Indentation¶
>Indent this awesome stuff!
Using a greater than sign before your text makes a cool, indented text block! This is another one of my favorites that I really try not to overuse because I love the effect so much.
Bold Font¶
**Make this so, so dark!**
Make this so, so dark!
Bold text is one of my favorites when I don't want to overuse color or indented blocks in my notebook but want to make an important point pop. It's clean and simple, but it stands out, too.
Italics¶
*Tell all the truth but tell it slant*
Tell all the truth but tell it slant
Strikethrough¶
~~Strike this, reverse it~~
Strike this, reverse it
Horizontal Lines¶
Below are two code snippets and the rendered code snippets; they will give you a nice, subtle line for separating sections in your notebook.
****
OR
____
Task Boxes¶
This works well in markdown files like your README files, but it will not render properly here because Github Pages doesn't work well with some markdown, especially when you mix markdown with html. Don't worry, it will look cool in your READMEs and other markdown files.
markdown
- [x] Some task
- [ ] Some more tasks- [x] Some task
- [ ] Some more task
Colored Font¶
I LOVE colored fonts in notebooks! Be careful of using the really light colored ones; as you can see below, they're really hard to read!
<font color=green>Write your so, so important stuff here!</font>
Colored font really makes text pop in your notebook.
Colored font really makes text pop in your notebook.
Colored font really makes text pop in your notebook.
Colored font really makes text pop in your notebook.
Colored font really makes text pop in your notebook.
Some colored font can be too hard to read, so be careful.
Some colored font can be too hard to read, so be careful.
Colored Boxes¶
I love the colored boxes, but I try not to overuse them! You can change the color by changing the alert type you specify as you will see in the example code blocks below:
<div class="alert alert-block alert-info"><b>Tip:</b> Use blue boxes (alert-info) for tips and notes.If it’s a note, you don’t have to include the word “Note”.</div>
<div class="alert alert-block alert-warning">Write stuff here.</div>
<div class="alert alert-block alert-success">Write stuff here.</div>
<div class="alert alert-block alert-danger">Write stuff here.</div>
Highlighting Text¶
Pop text with a bright background or use this great snippet to replicate the look of typing in the terminal.
<code style="background:yellow;color:black">Useful for highlighting to grab the attention of the reader towards certain points.</code>
Grab the attention of the reader!
<p style="background:black">
<code style="background:black;color:white">C:\Users\YOUR_USERNAME> pip3 install roughviz
</code>
</p>
C:\Users\YOUR_USERNAME> pip3 install roughviz
Tables¶
Here is what the code looks like with the table the rendered code creates below it.
| Step 1 | Step 2 | Step 3 | Step 4 | Step 5 |
|---------|--------|--------|--------|--------|
|Acquire |Prep |Explore |Model |Evaluate|
| Step 1 | Step 2 | Step 3 | Step 4 | Step 5 |
|---|---|---|---|---|
| Acquire | Prep | Explore | Model | Evaluate |
Customize the alignment of your table with the addition of a colon in your hyphen strings.
:--- = left align
---: = right align
:---: = centered
Code Styling¶
Monospace Font for Code Snippets¶
You can use the grave accent on the upper left of your keyboard to surround code snippets. They will display in monospace font like this with a gray background instead of executing. Use this when you are embedding small snippets of code in your text. If you have a code block, see the syntax below for Code and Syntax Highlighting.
Code and Syntax Highlighting¶
When you are displaying more than a word or phrase of code, this is a great way to handle blocks of code. You can see the block begins and ends with three grave accent marks. In this example, my code is Python, so I identify my language on the first line. This allows the notebook to display proper highlighting like you would see in a text editor. Super clean.
```python
def cool_code(code):
print(code)
```
def cool_code(code):
print(code)
Image Styling¶
Drag and Drop Images¶
You can simply drag and drop or copy and paste an image into your Jupyter notebook. I have run into issues when I embed more than one image in a notebook by using drag and drop, so I prefer to embed my images using the syntax you see below.
Below, you can see the code and the rendered code below it displaying the image. The text in the brackets is optional, but it's nice to include a description.
Anchor Links¶
Embed an internal link to a section of your own notebook. This is great to quickly jump from one section of a large notebook to another.
- Add a tag above the section you want to link. This tag identifier is called section_1, but you could call it whatever you want (without spaces, use underscore if you want).
<a id='section_1'></a>
- Add the name you want displayed for the link in brackets, and the section tag proceded by a pound sign.
For more details, see [Section 1](#section_1)
Here is an example that will take you back to the Text Styling section above.
Embed an External Link in Your Text¶
The *quick*, brown fox jumped **over** the lazy [dog](https://en.wikipedia.org/wiki/Dog).The quick, brown fox jumped over the lazy dog.
Buttons, Take Me Away!¶
<button class="button-save large">[Codeup Data Science](https://codeup.com/ds-course-catalog/)</button>
<button class="button-save large">[w3docs](https://w3docs.com)</button>
Image Button Links¶
If you use an image saved locally, it will not display in your html file. You need the image address.
[](target_url)
[](https://ghost.org/changelog/markdown/)
[](https://codeup.com/ds-course-catalog/)
[](https://github.com/faithkane3)
Markdown Resources¶
This is a nice, simple rundown of markdown formatting
This is a nice Basic Syntax Guide that shows Markdown and HTML versions side-by-side.
Who doesn't love a nice, simple cheatsheet
LaTeX Resources¶
This cheatsheet for using LaTeX in your notebook can save you a lot of time!
This one is GREAT, too. Just remember that you need to surround the text with dollar signs like below.
markdown
$\Omega$$\Omega$
Get the Table of Contents for Jupyter Notebook¶
Installing Nbextensions Configurator¶
1.Run the following from your command line:
conda install -c conda-forge jupyter_nbextensions_configurator
jupyter nbextensions_configurator enable --user
2.Once installed, you'll need to restart the notebook server.
3.Once restarted, you should be able to find the configurator in your edit tab at the top of your notebook.
4.Check the box at the top of the Nbextensions Configurator like you see below.
- [x] Some tasks disable configuration for nbextensions without explicit compatibility (they may break your notebook.)
I know it sounds scary, but just use common sense and try out new things one at a time.
I have only used Table of Contents and zenmode. One of those is useful, haha. If you find something really useful, please share your finding!