Tim Williams Portfolio

Markdown Template

Intro

• What is this?

  This is a simple Markdown template for my writing as I follow through books, workshops, etc. This template will serve as the structure of my markdown notes and my own personal reference sheet of the different Markdown syntax that I'm insterested in using, mostly vanilla markdown syntax so as to not get tied to any specific service that compiles the markup for me. Perhaps even pull these notes into some type of blog in the future where I can tell you all my opinions on VIM. I'll use this intro section in my actual notes to introduce the topic or book that the notes are for.

## Table of Contents
1. [Intro](#Intro)
2. [Topic 1](#topic1)
3. [Topic 2 - Useful links](#topic2)
   - [Tables](#tables)
   - [Sub Topic 3b](#topic3b)
4. [Links](#links)


Hashtag links work by putting an anchor tag with the name attribute equal to what you used in the ToC:
<a name="topic1"></a>

Table of Contents

1. Intro
2. Topic 1

3. Topic 2 - Useful links

   • Tables
   • Sub Topic 3b
4. Links

## First Topic
- Some information about what we're writing
- Some more information about super interesting topic 1
- Code Example:

<!-- Formatted Code (Github flavor)-->
```javascript
for(taco in tacos) {
  console.log(taco)
}```

Markdown Blocks

~~~
outer
```
inner
```
~~~

outer
```
inner
```

First Topic

• Some information about what we're writing
• Some more information about super interesting topic 1
• Code Example:

for(taco in tacos) {
  console.log(taco)
}

Diff-ing Syntax

```diff
  changedObject : {
-   key1: 'Some Removed Item',
+   key1: 'Some Added Item',
+   key2: 'Some Added Item 2',
  }```

  changedObject : {
-   key1: 'Some Removed Item',
+   key1: 'Some Added Item',
+   key2: 'Some Added Item 2',
  }

Collapsible Sections for spoilers or quizing:

<details>
<summary>Click here for collapsible sections, for spoilers/pre-collapsed sections, etc.</summary>
<p>
Here's some hidden code!

```js
var tacos = [1, 4, 9, 16];
tacos.map(x => {
  console.log(taco);
});```

</p>
</details>

var tacos = [1, 4, 9, 16];
tacos.map(x => {
  console.log(taco);
});

Second Topic

Font formatting

Collection of other useful markdown things to have in one place:

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Collection of other useful markdown things to have in one place:

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Tables and Lists

First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
UTF-8 Marks, for comparison tables| ✗ ✓ , ✘ ✔




Task Lists (this is github specific markdown, I think?):

- [x] This is a complete item
- [ ] This is an incomplete item

Task Lists (this is github specific markdown, I think?):

• This is a complete item
• This is an incomplete item

Links, Citations, Quotes, Footnotes

### Quotes
> Quote Text1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at finibus massa.
>
> Quote Text2: Proin pretium nunc a ligula finibus, vel elementum neque vulputate.


### Citations, Footnotes, Images and Links
Here is a footnote reference,<sup id="a1">[1](#f1)</sup> and another.<sup id="a2">[longnote](#f2)</sup>. You can see them cited below the lorem ipsum text.

Image links, (gifs work but lets not get carried away)

![Charlie Always Sunny cryeverytime](https://i.imgur.com/0jiGnhx.gif)

![Github Favicon](https://github.com/favicon.ico) Github favicon image link


{ Big old block of lorem text}


[Relative filepaths work as well, a homepage link!](/)

<b id="f1">1</b> Here is the footnote. [↩](#a1)
<b id="f2">Longnote</b> Here is the footnote. [↩](#a2)

Quotes

Quote Text1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at finibus massa.

Quote Text2: Proin pretium nunc a ligula finibus, vel elementum neque vulputate.

Citations, Footnotes, Images and Links

Here is a footnote reference,¹ and another.^longnote. You can see them cited below the lorem ipsum text.

Image links, (gifs work but lets not get carried away)

Github favicon image link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at finibus massa. Curabitur sed sem pulvinar ligula semper tincidunt. Morbi id mi bibendum, imperdiet sapien at, pretium ante. Donec id neque sollicitudin, volutpat leo sit amet, congue mauris. Suspendisse eleifend enim eros, in rutrum tellus cursus nec. Quisque convallis purus sed dolor blandit, vitae facilisis ante porttitor. Quisque finibus sodales purus, ac dapibus ligula vestibulum sed. Maecenas vel ultricies mi. Donec ut erat id nisl imperdiet imperdiet. Aliquam semper nisi diam, sit amet semper leo pellentesque non. Aliquam varius eu ex id tincidunt. Sed placerat interdum lacinia.

Proin pretium nunc a ligula finibus, vel elementum neque vulputate. Etiam dignissim diam at odio mollis dapibus. Integer auctor enim feugiat neque ultricies, vel facilisis urna facilisis. Maecenas ac dui rutrum, semper nisl non, pretium dui. Suspendisse posuere augue efficitur orci scelerisque, nec elementum metus congue. Sed mattis lorem vitae tincidunt sodales. Duis vel vehicula felis, eget accumsan libero. Vestibulum iaculis porta urna sed faucibus. Vivamus mollis urna ac libero aliquet, et congue eros placerat. In hac habitasse platea dictumst. Sed elementum, massa bibendum imperdiet fermentum, tellus lectus dignissim nibh, et hendrerit est dui a tellus. In placerat enim ut diam scelerisque, suscipit dapibus est fermentum. Aliquam eleifend nibh at nunc vestibulum, ut auctor nibh finibus.

Relative filepaths work as well, a homepage link!

1 Here is the footnote. ↩

Longnote Here is the footnote. ↩