Showing posts with label markdown. Show all posts
Showing posts with label markdown. Show all posts

First VSCode Tasks in less than 5 minutes

I'm working on solution to automating the generation of my weekly post: Reading Notes. While this work is finished, I still need to do many steps manually. I introduced in a previous post VSCode, that already supports markdown. In fact, from any markdown file, you can press Ctrl+Shift+V to preview the oupput. However, today, it's not possible to do anything with this preview. This post explains how we can use VSCode task to fix this problem.

Goal

Create a task that will quickly transform my current open markdown file in HTML.

Step 1 - Get a Markdown parser

First, we need Markdown parser. I'm sure many different are available, but in this post, I will use markdown-js, a Node.js parser that is available on github. To install it, just execute the following command:
npm install -g markdown

Step 2 - Create a Task

Secondly, we need to create our task. Open Visual Studio Code, and type Ctrl+Shift+P to open the Command Palette and then start typing Configure Task. Press Enter or select “Configure Task Runner”. This will create a new file tasks.jon, with many different samples of tasks. Before you replace the content of the page by the following code, take a look at the comment block at the top of the page. You will see different context variables that are available.

// Simple Task to transform MarkDown to Html
{
    "version": "0.1.0",
    "command": "md2html",
    "isShellCommand": true,
    "args": ["${file}"]
}

This defines our task using the json format. The command name in this case is md2html and we pass the name of the current open file as parameter using the variable ${file}. Finally, the "isShellCommand" is set to true so the task will be triggered by pressing Ctrl+Shift+B.

Step 3 - Try it

To try it, open a markdown page, hit Ctrl+Shift+B, and voilà! You should see in the output the HTML code generated.




References



~Frank

Meet my new best friend: Visual Studio Code

On the last week of April, Microsoft was having a huge event call //Build. During three (3) days many great conferences were presented. You can watch them on-demand on Channel 9. The keynote of day one is a must! It was during this keynote that Microsoft reveals many amazing news. One of them: Visual Studio Code. In this post, I indent to share my impression of this tool after one week of usage.

The Beast

You may be thinking: VSCode, it must be a light version Visual Studio... To that, I will reply it's not.
VSCode doesn't go without remembering other modern text editor like Sublime text, or brackets. The interface is far different from Visual Studio though. At this day, three themes are available but you can customize e v e r y t h i n g.

VSCode_Theme_contrasteVSCode_Theme_darkVSCode_Theme_light
VSCode is free, and it runs on Windows, Linux and Mac, it includes great tooling for web technologies such as HTML, Asp.net, Nodejs, CSS, LESS, SASS and JSon. It has syntax highlighting and a true IntelliSense. It also included: package managers, repositories, Git experience, debug tools, tasks, and so more!

I could continue over and over, but all the features are well explained on the official website.

My experience

It took me less than a minute to install on my "old" surface one. The interface is fast, and everything was looking good... Until I try to do something.

First, I was a bit confused. How should I open or create a project? Where is the menu? How do I use the debugger? After few minutes reading the excellent documentation on the official website, everything became clear. Visual Studio Code is sharing his name with his big brother, but he is really different. VS Code is using a folder approach, and a lot of shortcuts (so you keep your hands on the keyboard). And you quickly learn to use the Command Palette (Ctrl + Shift + P) to do more specific work.

My initial test was why Ghost. I cloned the repository directly from Github to my computer. Then from VSCode, open the folder. Without changing / editing anything, VSCode knew my project was in JavaScript, and the coloring and IntelliSense were working. And(F5), the debugger and I felt already more at home.

Firstdebug

A little message informed me that I needed to specify the starting point in the configuration file and voilà! I was debugging a Node.js project, that was easy.


Verdict

After a really short adaptation, Visual Studio Code reveals to be a reel gem. I strongly suggest that you spend few minutes reading the documentation before, to enjoy all his capabilities! The further I use it the more I become completely addicted. Visual Studio Code is an indispensable tool for everyone doing web development or looking for a powerful code editor.

VSCode_Markdown
 
 
Reference:
  • Visual studio code: Official website where you can find documentation and download VSCode for your favourite platform.

Reading Notes #174

gitSuggestion of the week


Cloud


Programming


~Frank Boucher


Why I switch to Markdown

The Markdown is not a new video game, but a way to write in plain text that can easily be converted in HTML. This "new" standard is gaining in popularity for many reasons. In this post, I will explain why I like it and show you some basic syntax, and nice tools.

What is Markdown

The exact Markdown's definition can by found on the Markdown website and look like this:
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML.
The syntax in Markdown is very easy to learn. In fact, it will come mostly by itself since it will look nice in any text editor.  For example, title and subtitle and list look like:

Title and sub-title
This Is My Title
================

Subtitle 1
----------

Here some items:
- Item 1
- item 2
- item 3

That easy right?! Let's add two more sample, this time a bit more "complex": Links and images.

Link

For links, two styles are possible:

Inline:

[Link Text](http://www.frankysnotes.com)
Reference:

[Link Text][1]
[Another one][link2]

...

[1]: http://www.frankysnotes.com 
[link2]: http://www.frankysnotes.com    

I personally prefer the reference style, because it keeps the text clean and easy to read. To add an image it's mostly the same two style again, but we add an exclamation point in front of the square brackets.

Image
![alternative text](http://frankysnotes.com/images/logo.png)

![alternative text][logo]

...

[logo]:http://frankysnotes.com/images/logo.png

This these simple things cover mostly everything we need when writing documentation, blog posts or reference documents. Obviously if you need more you can always go on the Markdown website. I also put online this full article in Markdown format.


Why Markdown is so nice

First, I really like Mardown because I can edit my files on all platforms. Since they are regular text files, any text editor on Android, IOS, Windows Phone, PC and Linux will do the job perfectly. Plus, your text will never lose is formatting, while changing from a device to another one (like with Word documents).
Likewise, since I'm working on different devices, I usually put my file in a shareable place like Dropbox or OneDrive. A simple text file is very small and quick to synchronize.

Tools, apps and more

Yes, you can edit your file in any text editor, but here are some nice tools that are available that will improve your experience.

MarkdownPad

MarkdownPad is a full-featured Markdown editor for Windows. It`s available in a free and pro version. Some interesting features are:
  • Instant HTML Preview
  • Easy Markdown formatting with keyboard shortcuts
  • Spell check
  • Use your own CSS
  • HTML and PDF Export
Website: http://markdownpad.com/


Denote
Denote is a Markdown text editor for Android that provides effortless syncing with Dropbox. Files created with Denote are saved as text (.txt) files.
  • Live preview for Markdown and HTML
  • Cloud based: Denote stores all its data in a subfolder on your personal Dropbox account so you can access it via your Mobile devices, Mac or PC
  • Offline support: changes are synced with Dropbox next time you're connected
  • Email files created in Denote
  • Customize font size and type face used for notes
Website: http://www.2storks.com/denote


Atom
This great text editor from GitHub has a nice Markdown Preview package, that will convert the markdow in HTML.
Atom Website: https://atom.io/
Markdown Preview package: https://github.com/atom/markdown-preview


Sublime Text
Sublime text is a well knowed text editor in the developer community and many different packages are also available.
Sublime Text Website: https://atom.io/
Markdown Preview package: https://github.com/revolunet/sublimetext-markdown-preview

In conclusion

I hope this post will motivate you to give it a try. Thanks for reading. Any comments, suggestions and/or questions are welcome.


~Frank Boucher


Reading Notes #157

microsoftazurewebsitescheatsheetSuggestion of the week


Cloud


Programming

  • Inception-Style Nested Data Formats (Scott Hanselman) - What seem to be a good solution at one point could put you in a big problem tomorrow. This post explains one possible cause.

Database


Miscellaneous

  • Markdown Style Guide - This post gives some simple tips to keep our Markdown document easy to read when not converted.

~Frank


Reading Notes #155

CloudenFrancais_cover_400Suggestion of the week


Cloud


Programming

  • Git: It’s Just Data! - This post shows us Git from a database point of view. Julie also gives really good reference for tool and book.

Databes


Miscellaneous


~Frank


Reading Notes #83

Post-it Put your code here

Suggestion of the week

Cloud

Programming

Database

Miscellaneous
  • Teach your kids to be fans (Scott Hanselman) - Good lesson. Today it's simple to send/ publish hard critics about anything... It is also that easy to congratulations... so do it.


~Frank







Reading Notes #82

Post-it_SnowmanSuggestion of the week
Cloud
This blog post summarizes the best practices to be used to protect Windows Azure Virtual Machines.
Integration
Programming
Miscellaneous

~Frank