Editor notes

Some helpful tips and extensions for editors for personal reference.

Table of content

Editor notes

Table of contents generated with markdown-toc

Font-family

<!--useful fonts-->
font-family: Monaco, Consolas, "Ubuntu Mono", monospace, Menlo, "Helvetica Neue Light", "Helvetica Neue";

VS-Code

Extensions

Atom One Dark Theme by Mahmoud Ali
Markdown Preview GitHub Styling by Matt Bierner
Live Server by Ritwick Dey
HTML Preview by Thomas Haakon Townsend
Beautify by HookyQR
File-icons by file-icons
Markdown All in One by Yu Zhang
Markdownlint by David Anson
GitHub Pull Requests and Issues by GitHub

Extensions are stored in the following location
DRIVE:\Users\%USERPROFILE%\.vscode\extensions

VSC Settings

Settings > Text Editor > Minimap > Editor > Minimap: Render Characters
Settings > Editor: Font-family
Settings > Editor: Code Lens Font-family
Settings > SCM: Input Font Family
Settings > Debug > Console: Font Family
Settings > Terminal > Integrated: Font Family

Markdown Lint

Rules can be enabled, disabled, and customized by creating a JSON file named .markdownlint.jsonc / .markdownlint.json or a YAML file named .markdownlint.yaml / .markdownlint.yml or a JavaScript file named .markdownlint.js in any directory of a project.

The default rule configuration disables MD013/line-length because many files include lines longer than the conventional 80 character limit:

{
    "MD013": false
}

Clone a Repository to VS Code

1 - Ctrl+Shift+P > Open “Command Palette”
2 - “Git: Clone”
3 - Input: Provide repository URL
4 - Select Folder for clone location

Syncing will not work (pull, push) if the repo is cloned into another repo. See Git clone into another git repo

Atom

Packages

Emmet by emmetio
File Icons by file-icons
Atom Live Server by jas-chen
Todo by reergymerej
Minimap by atom-minimap
Pigments by abe33
Linter by steelbrain
Linter-jshint by AtomLinter
Linter-jscs by AtomLinter
Atom-beautify by Glavin001
Ask a stack by Chris911
Highlight selected by richrace
Linter by steelbrain (see install instructions)
Linter-ui-default by steelbrain
Linter-markdownlint by leonelgalan (see install instructions)
Linter-node-markdownlint by josa42 [Preferred]
Atom-ide-ui by facebook-atom [Preferred]

Settings

Settings > Editor > Show Indent Guide
Settings > Editor > Zoom Font When Ctrl Scrolling
Settings > Keybindings > Keymap file add:

    'atom-text-editor':
    'f10': 'editor:toggle-soft-wrap'

Linter-node-markdownlint by josa42 Configuration

1 - Follow the install instructions (install packages)

No.	Packages
1.	Linter
2.	Linter-node-markdownlint (by josa42)
3.	atom-ide-ui

2 - A conflict message may appear in atom if you have other linter-ui - select which ui to disable
3 - Go to DRIVE:\Users\%USERPROFILE%\.atom\packages\linter-node-markdownlint and find .markdownlintrc file
4 - Copy .markdownlintrc file and paste it to the root folder of repository
5 - !!DO NOT add .json or other file type suffix to the file, otherwise, the config will not work.
6 - Configure Linter-node-markdownlint package in .markdownlintrc file by adding code. Example as follow:

{
  "MD004": false,
  "MD007": false
}

Also See Documentation and Repository for Linter-node-markdownlint

Disabled - Mardownlint by leonelgalan Configuration

1 - Follow the install instructions, (install packages) 1. Linter, 2. Linter-ui-default, 3. Linter-markdownlint.
2 - Add the following to DRIVE:\Users\%USERPROFILE%\.atom\config.cson (choose Config… in Atom menu)

'linter-markdownlint':
  executablePath: 'mdl'
  severity: 'error'

3 - Go to DRIVE:\Users\%USERPROFILE%\.atom\packages\linter-markdownlint, then copy the .mdlrc file (important!) and copy the .style.rb file
4 - Paste the .mdlrc and .style.rb files onto the root folder of repository
5 - You can now configure the Markdown Linter in the .style.rb file by adding codes. Example as below:

all
exclude_rule 'MD009'
exclude_rule 'MD033'

Also see Documentation and Repository for Linter-markdownlint

Linter rules

See Markdownlint GitHub by David Anson.

GitHub Markdown

Transfer Typora TOC onto GitHub README.md

GitHub markdown uses pandoc markdown which differs from Typora markdown. To turn the Typora markdown table of content TOC into functional TOC in GitHub, we need to export the Typora file as Markdown (other spec).

1 - Go to File > Preferences > Export
2 - Add export type as Markdown (other spec) > variant: GitHub-flavored markdown
3 - Install pandoc as instructed
4 - Restart PC? or Typora
5 - Export your Typora file: File > Export > Markdown (other spec)
6 - Your new file should have TOC that works in GitHub README.md or GitHub markdown

GitHub Markdown TOC

Create TOC in markdown File - GitHub TOC Generator by ecotrust-canada
// Special characters such as `` or ** or : will invalidate the TOC link, as TOC generator turn it into - character. For example:

[**Atom**](#--atom--) <!--invalid TOC link due to `**` special characters, conversion into `--` characters-->

GitHub page customisation

Example of basic customisation on GitHub page, see pages-themes minimal by parkr:

remote_theme: pages-themes/minimal@v0.2.0
plugins:
- jekyll-remote-theme # add this line to the plugins list if you already have one
title: html-learning
logo: assets/img/logo_3.png
description: Basic HTML, CSS learning with a test web building project to implement what I learnt.
show_downloads: true
google_analytics:

GitHub markdown relative links

Example of creating internal links (relative links) to other markdown (md) notes in repository with markdown, see stackoverflow GitHub Blog Relative Links:

[HTML Basics Notes](learning-notes/HTML-Basics-notes.md)  
[CSS Basics Notes](learning-notes/CSS-Basic-notes.md)  
[Markdown Notes](learning-notes/Markdown-notes.md)  
[Editor Notes](learning-notes/Editor-notes.md)  

Beautify and Markdown syntax

Beware that Beautify may affect some Markdown syntax. Use with caution in Markdown.