How I Build This Site
Platform and Service
- Github
- Jekyll
- Disqus
- MailChimp
- MakerWidget
Programming language
- Markdown
- Ruby/Gem
- HTML/CSS
- Python
- IPython notebook
IDE and extensions
-
Visual Studio Code
- Markdown All in one
- Markdown Shortcuts
- markdownlint
- Live Server
- Live Server Preview
- File Utils
- Auto Close Tag
- Auto Rename Tag
- Bracket Pair Colorizer
-
Vi/Vim
- NERDTree
Other tools
- Jupyter Notebook
- Jupyter Book
- nbviewer
Jupyter command-line
- Merge multiple .ipynb files into one file
pip install nbmerge
- Convert .ipynb to .html (by default)
jupyter nbconvert NOTEBOOK.ipynb
- Convert .ipynb to .html (by default)
jupyter nbconvert NOTEBOOK.ipynb --to html
- Execute notebook and replace file
jupyter nbconvert NOTEBOOK.ipynb --execute
- Execute notebook and save as .html file
jupyter nbconvert NOTEBOOK.ipynb --execute --to html
Convert .md to .html
- Use markdown2
pip install markdown2
- Use markdown-to-html
https://www.npmjs.com/package/markdown-to-html
- Use pandoc
https://pandoc.org/getting-started.html
HTML in Markdown
Lets try the different text styles Bold , Strong , Emphasis , Italic
Now, lets try different heading styles :
<h1>Hello in h1 !</h1>
Hello in h1 !
<h2>Hello in h2 !</h2>
Hello in h2 !
<h3>Hello in h3 !</h3>
Hello in h3 !
<h4>Hello in h4 !</h4>
Hello in h4 !
<h5>Hello in h5 !</h5>
Hello in h5 !
<h6>Hello in h6 !</h6>
Hello in h6 !
<h6 align="left">Hello in h6 at left !</h6>
Hello in h6 at left !
<h6 align="center">Hello in h6 at center !</h6></code
Hello in h6 at center !
<h6 align="right">Hello in h6 at right !</h6>
Hello in h6 at right !
This is a Block Quote, It can Expand Multiple Lines
You can use the mark tag to highlight text.
This line of text is meant to be deleted text
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
attr
HTML
Unordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5
Ordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Syntax Highlighting
You can add inline code just like this using <code>, e.g.
i am code
This is block code using <pre><code>.
<pre><code>
function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
</pre></code>
<pre><code>
This line is so longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg.
</pre></code>
GitHub gist Embed
YouTube Responsive Embed
Vimeo Responsive Embed
TED Responsive Embed
Twitch Responsive Embed
SoundCloud Embed
CodePen Embed
Input Style
Twitter Embed
I just published “Deploying a blog using Jekyll and Github Pages with SSL certificate for Free” https://t.co/B3T3IQVU93
— Sujay Kundu (@SujayKundu777) June 29, 2018