diff --git a/README.md b/README.md new file mode 100644 index 0000000..4811c2e --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +# CORE INTRO TO GIT AND GITHUB +This is the official Girl Develop It Core Intro to Git and Github course. Material based on original material by Kim Moir, Daniel Fischer, Aurelia Moser, Carina C. Zona and Izzy Johnston. + +The course is meant to be taught in a two-hour workshop. Each of the slides and practice files are customizable according to the needs of a given class or audience. + + +## Theme customization + +You can change theme colors by changing the theme css to any of the following options: +```html + + + + +``` +You can change the text editor theme by changing the highlight.js css to the following options: +```html + + +``` +You can change transition by changing the reveal transition property in Reveal.initialize +```javascript + Reveal.initialize({ + transition: 'default', // default/cube/page/concave/zoom/linear/none + }); +``` diff --git a/images/add-ssh.png b/images/add-ssh.png new file mode 100644 index 0000000..d9c6968 Binary files /dev/null and b/images/add-ssh.png differ diff --git a/images/bootcamp_2_newrepo.jpg b/images/bootcamp_2_newrepo.jpg new file mode 100644 index 0000000..d358cbc Binary files /dev/null and b/images/bootcamp_2_newrepo.jpg differ diff --git a/images/bootcamp_2_repoinfo.png b/images/bootcamp_2_repoinfo.png new file mode 100644 index 0000000..836ccdd Binary files /dev/null and b/images/bootcamp_2_repoinfo.png differ diff --git a/images/bootcamp_3_fork.jpg b/images/bootcamp_3_fork.jpg new file mode 100644 index 0000000..6d2114f Binary files /dev/null and b/images/bootcamp_3_fork.jpg differ diff --git a/images/click-pull-request.png b/images/click-pull-request.png new file mode 100644 index 0000000..4832c4c Binary files /dev/null and b/images/click-pull-request.png differ diff --git a/images/gdi_logo_badge.png b/images/gdi_logo_badge.png new file mode 100644 index 0000000..8e87add Binary files /dev/null and b/images/gdi_logo_badge.png differ diff --git a/images/gitk.png b/images/gitk.png new file mode 100644 index 0000000..b11e324 Binary files /dev/null and b/images/gitk.png differ diff --git a/images/install-git.png b/images/install-git.png new file mode 100644 index 0000000..69fde4e Binary files /dev/null and b/images/install-git.png differ diff --git a/images/manage-my-pull-requests.png b/images/manage-my-pull-requests.png new file mode 100644 index 0000000..0bd2164 Binary files /dev/null and b/images/manage-my-pull-requests.png differ diff --git a/images/no-vc.png b/images/no-vc.png new file mode 100644 index 0000000..4322b8a Binary files /dev/null and b/images/no-vc.png differ diff --git a/images/no-vc.png_1 b/images/no-vc.png_1 new file mode 100644 index 0000000..3663430 Binary files /dev/null and b/images/no-vc.png_1 differ diff --git a/images/pull-request.png b/images/pull-request.png new file mode 100644 index 0000000..3851a15 Binary files /dev/null and b/images/pull-request.png differ diff --git a/images/repo-pull-requests.png b/images/repo-pull-requests.png new file mode 100644 index 0000000..54e0a06 Binary files /dev/null and b/images/repo-pull-requests.png differ diff --git a/images/subversion-change-2010-2012.png b/images/subversion-change-2010-2012.png new file mode 100644 index 0000000..ebb2a1a Binary files /dev/null and b/images/subversion-change-2010-2012.png differ diff --git a/images/subversion-share-2012.png b/images/subversion-share-2012.png new file mode 100644 index 0000000..d9da377 Binary files /dev/null and b/images/subversion-share-2012.png differ diff --git a/images/with-vc.png b/images/with-vc.png new file mode 100644 index 0000000..50c376f Binary files /dev/null and b/images/with-vc.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..da55a79 --- /dev/null +++ b/index.html @@ -0,0 +1,598 @@ + + + + + + + Intro to Git and Github ~ Girl Develop It + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ +

Intro to Git and Github

+
+ + +
+

Welcome!

+
+

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

+

Some "rules"

+
    +
  • We are here for you!
    • +
  • Every question is important
    • +
  • Help each other
    • +
  • Have fun
    • +
+
+
+ +
+

Welcome!

+
+

Tell us about yourself.

+
    +
  • Who are you?
    • +
  • What do you hope to get out of the class?
    • +
  • Who was your favorite character as a child?
    • +
+
+
+ +
+

What we will cover today

+
    +
  • What is version control and why should we care?
    • +
  • Basics of git -- the essential commands
    • +
  • "Gitting" social with GitHub
    • +
+
+ + +
+
+

What is version control?

+

Version control allows you (and your team) to do two powerful things

+
+

Collaborate

+

Create anything with other people, from academic papers to entire websites and applications.

+
+
+

Track and revert changes

+

Mistakes happen. Wouldn't it be nice if you could see the changes that have been made and go "back in time" to fix something that went wrong? +

+
+
+

Working without Version Control

+ Trying to make a grocery list with 5 people and no version control +

The Horror!

+
+
+

Working with Version Control

+ Successfully making a grocery list with 5 people and version control +

Rainbows and bunny rabbits! +

+
+
+
+

Brief history of Version Control

+

1990s -- CVS (Concurrent Version Systems)

+

2000s -- SVN (Apache Subversion)

+

2005 -- Git (well, Git)

+
+
+

Version Control Types

+
+

Centralized Version Control

+

Examples: CVS, SVN

+

One central server, each client (person) checks out and merges changes to main server

+
+
+

Distributed Version Control

+

Examples: Git, Mercurial

+

Each client (person) has a local repository, which they can then reconcile with the main server.

+
+
+
+

Version Control Distribution

+ Version control share between Bazaar, CVS, Git, Mercurial and Subversion +
+ +
+

Version Control Change

+ Version control popularity change between 2010 and 2013 between Bazaar, CVS, Git, Mercurial and Subversion +
+
+ +
+

Intro to Git

+

Goals of Git Design

+
    +
  • Fast -- add to your team and code base quickly
    • +
  • Distributed (see slide above)
    • +
  • Each commit has a corresponding hash (track changes from everyone)
    • +
  • Everyone has a local copy of the history
    • +
+
+ +
+
+

Installation and Setup

+ +

Install git

+ Download latest version of Git + +
+
+

Installation and Setup

+

Setup ssh keys

+ 

+             $ cd ~/.ssh
+
+ 

+$ ssh-keygen -t rsa -C "your_email@example.com"
+# Generating public/private rsa key pair.
+# Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]
+
+ 

+Enter passphrase (empty for no passphrase): [Type a passphrase]
+# Enter same passphrase again: [Type passphrase again]
+
+
+
+

Installation and Setup

+

Get SSH Key

+ 

+Your identification has been saved in /Users/you/.ssh/id_rsa.
+# Your public key has been saved in /Users/you/.ssh/id_rsa.pub.
+# The key fingerprint is:
+# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com
+
+
+
+

Installation and Setup

+

Add SSH Key to Github

+ Steps to add SSH key to github account +
+
+

Installation and Setup

+

Setup name and email in gitconfig

+ 

+$ git config --global user.name "Your Name Here"
+# Sets the default name for git to use when you commit
+
+ 

+$ git config --global user.email "your_email@example.com"
+# Sets the default email for git to use when you commit
+
+ 

+$ git config --list
+
+
+
+ +
+
+

Your first Local Repository

+

Go to home directory

+ 

+  cd ~/
+  OR
+  cd Users\username
+
+

Create a "working directory"

+ 

+  mkdir my-first-repo
+  cd my-first-repo
+
+

Initialize repository with Git

+ 

+  git init
+  git status
+
+
+
+

Add files

+

Create a new hello_world.txt file in your new folder

+

Check repo status

+ 

+  git status
+
+

Tell Git to track our new file

+ 

+  git add hello_world.txt
+  git status
+
+

File is now tracked by Git

+
+
+

Changes and commits

+

Open hello_world.txt and add some more text

+ 

+  git status
+
+

Stage and commit the change

+ 

+  git add hello_world.txt
+  git commit -m "First commit. Added hello world to repository."
+
+
+
+ +
+
+

What did we just do??

+

How is this all different than just saving a file?

+
    +
  • When we add a new file, we tell Git to add the file to the repository to be tracked
    • +
  • When we stage an existing file (also with the keyword 'add'), we are telling Git to track the current state of our file
    • +
  • A commit saves changes made to a file, not the file as a whole. The commit will have a 'hash' so we can track which changes were committed when and by whom.
    • + +
+
+
+

Look at our progress

+ 

+  git log
+
+ 

+  commit [HASH HERE]
+  Author: Your name 
+  Date:   [DATE HERE]
+
+      First commit. Added hello world to repository.
+
+
+
+

Look at our progress, visually

+ 

+  gitk
+
+ Image of commits for this curriculum repo +
+
+ +
+
+

Nobody's Perfect

+

Undoing local changes

+

If you haven't committed yet

+
+

Open hello_world.txt and add some new text

+ 

+  change hello_world.txt
+  git checkout hello_world.txt
+
+
+

Look at hello_world.txt. Your changes are gone.

+
+
+

Nobody's Perfect

+

Undoing staged changes

+
+

Open hello_world.txt and add some new text

+ 

+git add hello_world.txt
+git reset HEAD hello_world.txt
+git checkout hello_world.txt
+
+
+

Look at hello_world.txt. Your changes are gone.

+
+
+

Nobody's Perfect

+

Undoing staged changes

+
+

Open hello_world.txt and add some new text

+ 

+git add hello_world.txt
+git commit -am "Changing and committing some lines"
+git log --pretty=oneline
+git revert [HASH]
+
+
+

Look at hello_world.txt. Your changes are gone.

+
+
+

Nobody's Perfect

+

Remove a file from staging

+

Create new file my_new_file.txt

+ 

+git add my_new_file.txt
+git reset my_new_file.txt
+
+
+
+

Nobody's Perfect

+

Delete a file

+

Create new file my_other_file.txt

+ 

+git add my_other_file.txt
+
+

Manually delete your file

+ 

+git rm my_other_file.txt
+
+
+
+ +
+
+

Branching

+
    +
  • Develop different code on the same base
    • +
  • Conduct exploratory work without affecting the work on master branch
    • +
  • Incorporate changes to your master branch only when you are ready
    • +
+
+
+

Branching

+

Create a new branch called version2

+ 

+git checkout -b version2
+
+

Add new lines to hello_world.txt

+ 

+git add hello_world.txt
+git commit -m "Adding changes to version 2"
+
+
+
+

Branching

+

Switching branches

+

See all branches. Branch with * is active

+ 

+git branch
+
+

Switch to master and look at hello_world.txt

+ 

+git checkout master
+
+

Switch to version2 and look at hello_world.txt

+ 

+git checkout version2
+
+
+
+ +
+
+

Merging

+

Merge to get changes from one branch into another*

+

Switch to master and merge changes

+ 

+git checkout master
+git merge version2
+
+

*rebase is another option, but will not be covered in this workshop

+
+
+

Merging

+

Merge conflicts

+

Change first line in hello_world.txt in master branch

+ 

+git add hello_world.txt
+git commit -m "Changing first line in master"
+
+

Change first line in hello_world.txt in version2 branch

+ 

+git checkout version2
+# open hello_world.txt and change first line
+git add hello_world.txt
+git commit -m "Changing first line in version2"
+
+
+
+

Merging

+

Merge conflicts, cont.

+

Merge from master into version2

+ 

+git merge master
+
+

You will be notified of a conflict. Go to the file and fix the problem. Then commit your edits.

+ +
+
+ +
+
+

GitHub

+
    +
  • Launched in 2008
    • +
  • Leader in Social Coding
    • +
  • GitHub is a commercial site that allows users to host Git repositories publicly and privately
    • +
  • Open source projects host or mirror their repositories on GitHub
    • +
  • Post your own code for others to use or contribute to
    • +
  • Use and learn from the code in other people's repositories
    • +
+
+
+ +
+
+

GitHub

+

Create your first repository

+ How to create a new repository. Image from https://help.github.com/articles/create-a-repo +
+
+

GitHub

+

Create your first repository

+ How to create a new repository. Image from https://help.github.com/articles/create-a-repo +
+
+

GitHub

+

ReadME

+
+ While a README isn't a required part of a GitHub repository, it is a very good idea to have one. READMEs are a great place to describe your project or add some documentation such as how to install or use your project. You might want to include contact information - if your project becomes popular people will want to help you out. +
+
+
+

GitHub

+

Get Local Repository of GitHub Repo

+ 

+cd ../ # Back in root directory
+mkdir hello-github
+cd hello-github
+git init
+git remote add origin git@github.com:username/NAME-OF-REPO
+git pull origin master
+
+
+
+

GitHub

+

Push to GitHub Repo

+

Edit the ReadMe file + 


+git add README
+git commit -m "Updating readme file"
+git push origin master
+
+

Go look at your github repo online

+
+
+

GitHub

+

Pulling from remote repository

+

If you are working with a team, you want to make sure that you have everyone's changes before pushing your changes to the GitHub repo

+ 

+# Commit local changes
+git commit -m "My latest commit"
+# Pull changes other people have made
+git pull origin master
+# Fix any conflicts (see merge conflicts above) and commit
+git commit -m "Fixing merging conflicts"
+# push local changes to GitHub
+git push origin master
+
+
+
+ +
+
+

Forking

+
    +
  • There are MILLIONS of public repositories on GitHub
    • +
  • If you want to use or contribute to a repository, you can fork it.
    • +
+
+
+

Forking

+ How to fork a repository. Image from https://help.github.com/articles/fork-a-repo +
+
+

Forking

+

Cloning

+

Clone to get a local repository of your fork + 


+cd ../
+
+git clone https://github.com/username/FORKED-REPO-NAME.git
+
+cd FORKED-REPO-NAME
+
+git remote add upstream https://github.com/original-username/FORKED-REPO-NAME.git
+# Assigns the original repository to a remote called "upstream"
+
+git fetch upstream
+# Pulls in changes not present in your local repository, without modifying your files
+
+
+
+ +
+
+

Pull Requests

+
    +
  • After you fork and clone a repository all pushed changes will go to your fork
    • +
  • These changes will not affect the original repository
    • +
  • If you would like to get your changes to be incorporated into the original repo, you can submit a pull request
    • +
+
+
+

Starting a pull request

+ How to initiate a pull request. Image from https://help.github.com/articles/using-pull-requests +
+
+

Previewing and sending pull request

+ How to preview and send a pull request. Image from https://help.github.com/articles/using-pull-requests +
+
+

Managing pull requests

+

How to manage pull requests is out of the scope of this short workshop, but you can learn more from the Github Collaborating Tutorials +

+
+ +
+

Questions?

+
? +
+
+
+ +
+ + + + + + + + + diff --git a/reveal/LICENSE b/reveal/LICENSE new file mode 100644 index 0000000..23a2d5a --- /dev/null +++ b/reveal/LICENSE @@ -0,0 +1,19 @@ +Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/reveal/README.md b/reveal/README.md new file mode 100644 index 0000000..dd7d820 --- /dev/null +++ b/reveal/README.md @@ -0,0 +1,278 @@ +# reveal.js + +A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/). + +reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere. + + +#### More reading in the Wiki: +- [Changelog](https://github.com/hakimel/reveal.js/wiki/Changelog): Up-to-date version history. +- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own! +- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks. + +## rvl.io + +Slides are written using HTML or markdown but there's also an online editor for those of you who prefer a more traditional user interface. Give it a try at [www.rvl.io](http://www.rvl.io). + + +## Instructions + +### Markup + +Markup heirarchy needs to be ``
`` where the ``
`` represents one slide and can be repeated indefinitely. If you place multiple ``
``'s inside of another ``
`` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and it will be included in the horizontal sequence. For example: + +```html +
+
+
Single Horizontal Slide
+
+
Vertical Slide 1
+
Vertical Slide 2
+
+
+
+``` + +### Markdown + +It's possible to write your slides using Markdown. To enable Markdown, add the ```data-markdown``` attribute to your ```
``` elements and wrap the contents in a ``` +
+``` + + +### Configuration + +At the end of your page you need to initialize reveal by running the following code. Note that all config values are optional and will default as specified below. + +```javascript +Reveal.initialize({ + // Display controls in the bottom right corner + controls: true, + + // Display a presentation progress bar + progress: true, + + // Push each slide change to the browser history + history: false, + + // Enable keyboard shortcuts for navigation + keyboard: true, + + // Enable the slide overview mode + overview: true, + + // Loop the presentation + loop: false, + + // Number of milliseconds between automatically proceeding to the + // next slide, disabled when set to 0, this value can be overwritten + // by using a data-autoslide attribute on your slides + autoSlide: 0, + + // Enable slide navigation via mouse wheel + mouseWheel: true, + + // Apply a 3D roll to links on hover + rollingLinks: true, + + // Transition style + transition: 'default' // default/cube/page/concave/zoom/linear/none +}); +``` + +### Dependencies + +Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: + +```javascript +Reveal.initialize({ + dependencies: [ + // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/ + { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, + // Interpret Markdown in
elements + { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, + { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, + // Syntax highlight for elements + { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + // Zoom in and out with Alt+click + { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, + // Speaker notes + { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } + ] +}); +``` + +You can add your own extensions using the same syntax. The following properties are available for each dependency object: +- **src**: Path to the script to load +- **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false +- **callback**: [optional] Function to execute when the script has loaded +- **condition**: [optional] Function which must return true for the script to be loaded + + +### API + +The Reveal class provides a minimal JavaScript API for controlling navigation and reading state: + +```javascript +// Navigation +Reveal.slide( indexh, indexv ); +Reveal.left(); +Reveal.right(); +Reveal.up(); +Reveal.down(); +Reveal.prev(); +Reveal.next(); +Reveal.prevFragment(); +Reveal.nextFragment(); +Reveal.toggleOverview(); + +// Retrieves the previous and current slide elements +Reveal.getPreviousSlide(); +Reveal.getCurrentSlide(); + +Reveal.getIndices(); // { h: 0, v: 0 } } +``` + +### States + +If you set ``data-state="somestate"`` on a slide ``
``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. + +Furthermore you can also listen to these changes in state via JavaScript: + +```javascript +Reveal.addEventListener( 'somestate', function() { + // TODO: Sprinkle magic +}, false ); +``` + +### Ready event + +The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating. + +```javascript +Reveal.addEventListener( 'ready', function( event ) { + // event.currentSlide, event.indexh, event.indexv +} ); +``` + +### Slide change event + +An 'slidechanged' event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. + +```javascript +Reveal.addEventListener( 'slidechanged', function( event ) { + // event.previousSlide, event.currentSlide, event.indexh, event.indexv +} ); +``` + +### Internal links + +It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```
```): + +```html +Link +Link +``` +### Fullscreen mode +Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. + +### Fragments +Fragments are used to highlight individual elements on a slide. Every elmement with the class ```fragment``` will be stepped through before moving on to the next slide. Here's an example: http://lab.hakim.se/reveal-js/#/16 + +The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment: + +```html +
+

grow

+

shrink

+

roll-in

+

fade-out

+

highlight-red

+

highlight-green

+

highlight-blue

+
+``` + +### Fragment events + +When a slide fragment is either shown or hidden reveal.js will dispatch an event. + +```javascript +Reveal.addEventListener( 'fragmentshown', function( event ) { + // event.fragment = the fragment DOM element +} ); +Reveal.addEventListener( 'fragmenthidden', function( event ) { + // event.fragment = the fragment DOM element +} ); +``` + + +## PDF Export + +Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome). +Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-13872948. + +1. Open your presentation with [css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) included on the page. The default index HTML lets you add *print-pdf* anywhere in the query to include the stylesheet, for example: [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf). +2. Open the in-browser print dialog (CMD+P). +3. Change the **Destination** setting to **Save as PDF**. +4. Change the **Layout** to **Landscape**. +5. Change the **Margins** to **None**. +6. Click **Save**. + +![Chrome Print Settings](https://s3.amazonaws.com/hakim-static/reveal-js/pdf-print-settings.png) + + +## Speaker Notes + +reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Append ```?notes``` to presentation URL or press the 's' key on your keyboard to open the notes window. + +By default notes are written using standard HTML, see below, but you can add a ```data-markdown``` attribute to the ```