ILO-helper

The all in one place to make the ILOs a little bit less painful.

Feel free to contribute and add to it!

Live Server

Whenever I'm writing ILOs I want to see the outcome of what I'm writing. Instead of using the built-in Markdown preview of Visual Studio (which looks weird with custom HTML/CSS elements). I use the generated website directly. I use server.bat to automatically run the web server and hot reload when I make a change:

start "" http://localhost:4000
bundle exec jekyll serve --livereload
@REM wait for input
pause

Visual Studio Extensions

1. Markdown All in One - All you need for Markdown
2. LTeX+ - offline grammar checking
3. Paste Image - Paste images from clipboard (read section below)
4. Read Time - Gives a reading time estimation per file

Paste Image

While Visual Studio supports Ctrl+V to paste images in Markdown. They get placed in the wrong folder/location. The Paste Image extension allows you to set the correct folder. In the .vs folder place a settings.json file and specify the settings. Example from a real ILO project:

{
    "pasteImage.basePath": "${currentFileDir}",
    "pasteImage.path": "${projectRoot}/assets//media"
}

Now when you can paste a copied image using Ctrl+Alt+V

Hyperlinks

Markdown has built in hyperlinks for links on the same page, for example:

# My Header

this is a [link](#my-header).

But be careful when you use emojis or different characters! E.g. # My Header + Foo has to be [link](#my-header--foo).

When using a web browser. You can see what the ID of a header is using inspect elements (on Chrome: Ctrl+Shift+C):

If you need a link to a place that has no header. You can write:

<a name="foo-bar">

this is a [link](#foo-bar).

You can also link to other pages by writing:

See [My Feaure](ILO1.html#my-feature) for more info.

HTML + CSS

Markdown supports HTML and CSS elements, and since we're converting it to a website, it allows us to do some web dev!

It's important you have this snippet in your config.yml:

markdown: kramdown
kramdown:
  parse_block_html: true

Fieldset

<fieldset>

<legend style="font-size: 1.5em;"> Title</legend>

Content goes here...

</fieldset>

<style>
fieldset {
  border: 3px solid;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

Dropdown

Note

A teacher has mentioned they prefer people not to use dropdown since it hinders the way they read ILOs.

<details>

<summary markdown="span"> **Title** </summary>

## Title

Content goes here...

</details>

<style>
details {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}

details>summary {
  &:hover {
    cursor: pointer;
  }
  display: list-item;
  list-style-type: '▶️';
  user-select: none;
}

details[open]>summary {
  list-style-type: '🔽';
}
</style>

Visual Studio Code Snippets

Visual Studio allows you to make custom "key binds". Simply make a snippets.code-snippets file in your .vscode folder. Then create custom snippets, like these:

You can now type !fie, press tab, and you get an instant fieldset.

{
	"FielSet": {
		"prefix": "!fieldset",
		"body": [
			"<fieldset>",
			"",
			"<legend style=\"font-size: 1.5em;\">${1: Title}</legend>",
			"",
			"${2:Content goes here...}",
			"",
			"</fieldset>"
		],
		"description": "Insert fieldset with legend"
	},
	"Image": {
		"prefix": "!image",
		"body": [
			"![${2:Alt Text}](../assets/media/${1:ImageName})"
		],
		"description": "Insert image"
	},
	"Video": {
		"prefix": "!video",
		"body": [
			"<video width=\"100%\" height=\"auto\" controls>",
			"  <source src=\"../assets/media/${1:Name}\" type=\"video/mp4\">",
			"</video>",
			"",
			"![${2:Title}](../assets/media/${1:Name})"
		],
		"description": "Insert video tag"
	}
}