carl_pch carl_pch - 1 month ago 17
Markdown Question

Markdown for codes on webpage

I am experienced with CSS and a beginner in Python. In the past, while writing blogs/webpages with codes, I would simply just create a div with a particular class and make it a code bloc with different colour and font-family, etc.

However, these days I've seen so many beautiful applications of markdown such as github-markdown-css or dillinger. But I really don't know where to start learning. For instance, I am not even sure where to execute the installation instruction below...

$ npm install --global generate-github-markdown-css


If I really want to really go beyond linking html files/blog posts with CSS and do some nice-looking markups, what are the steps necessary?
To make it more solvable as a question in this forum: if I just have a html file and want to create a code bloc showed above by typing

> line 1
> line 2


instead of

<div class="codebloc">
line 1<br/>
line2
</div>


Where should I start?

Answer

For instance, I am not even sure where to execute the installation instruction below...

npm install --global generate-github-markdown-css

This command, which you can execute in your terminal, will install the specified npm package generate-github-markdown globally, making it available from anywhere on your system. To execute it you'll need npm installed on your computer. If you're not already familiar with npm, I suggest reading the official documentation or this guide on Sitepoint. Since it installs the package globally, you can execute the command from pretty much anywhere on your computer.

How do I make code blocks in Markdown?

Markdown will automatically convert text with for spaces in front to code, which looks like this:

console.log("This code is cool");

If the Markdown parser supports GitHub Flavoured Markdown, which most parsers do, you can also wrap your code with three back-ticks ```. If you want inline code you can use just a single back-tick ` on both side of the code.

If you want to learn more about how to do various things with Markdown, including some more examples on how to write code blocks, I recommend looking at this page.

Comments