My Docs
BlogGithubLinkedin
Blog-Content
Blog-Content
  • Blog
  • README
    • 10. Regular Expression Matching
    • 13. Roman to Integer
    • 14. Longest Common Prefix
    • 14. Longest Common Prefix
    • 19. Remove Nth Node From End of List
    • 19. Remove Nth Node From End of List
    • 8. String to Integer (atoi)
    • Table of contents
    • All the Things You Can Do With GitHub API and Python
    • Archive
    • Articles
    • Bash Commands That Save Me Time and Frustration
    • Basic Web Development Environment Setup
    • Basic Web Development Environment Setup
    • Blog Archive
    • Blog Archive
    • Blog
    • Bookmarks
    • Cheatsheet:
    • Clock
    • Community
    • Constructor Functions
    • Content
    • Cool Github Profiles
    • Data Structures Interview
    • Docs
    • dynamic-time-warping
    • Embed Showcase
    • Es6 Features
    • Functions
    • Gatsby Paginate
    • Getting Started
    • Google Cloud
    • google-sheets-api
    • History API
    • How to install Python 2.7 on Ubuntu 20.04 LTS
    • HTML SPEC
    • index
    • Installation
    • Installing Node
    • Interactive
    • Intro To NodeJS
    • Intro To React
    • Intro To React
    • Introducing JSX
    • Introduction to npm
    • Javascript and Node
    • Javascript and Node
    • Javascript and Node
    • Javascript Interview Questions:
    • Javascript Interview Questions:
    • Javascript Practice
    • Javascript Practice
    • Javascript Practice
    • JS Fat Arrow Functions
    • Jupyter Notebooks
    • Jupyter Notebooks
    • Leetcode
    • Leetcode
    • Leetcode
    • lorem-ipsum
    • Lorem ipsum
    • Markdown
    • My Favorite VSCode Themes
    • Nature
    • New Conference
    • Node APIs With Express
    • Node APIs With Express
    • Node Buffers
    • Node Docs
    • Node Export Module
    • Node Export Module
    • Node Modules System
    • Node vs Browser
    • Overview
    • Phone Number
    • Process in Linux
    • Pull Requests
    • Python at length
    • Python Quiz
    • Python Quiz
    • Python Snippets
    • Python Snippets
    • React Class Components Demo
    • React Class Components Demo
    • React Docs
    • React In Depth
    • RECENT PROJECTS
    • RECENT PROJECTS
    • Reference
    • Resume
    • Search:
    • Semantic Versioning
    • Showcase
    • Showcase
    • Sorting Algorithms
    • Sorting Strings
    • Starter Theme
    • Starter Theme
    • The Node.js Event Loop
    • The Node.js Event Loop
    • Tools
    • Tools
    • Trouble Shooting
    • Typography
    • UI Components
    • Understanding PATH
    • Understanding PATH
    • URL:
    • Visualizing the Discrete Fourier Transform
    • Web Apis
    • Web Design
    • Web Dev Bookmarks
    • Web Developer Tools
    • What is THIS
    • What is THIS
    • where-is-npm-pack
    • with some basic knowledge of React
    • Zumzi Instant Messenger
Powered by GitBook
On this page
  • Markdown:
  • Why markdown?
  • Markdown basics
  • Advanced Formatting tips
  • Useful packages
  • Useful utilities
  • How Serverless uses markdown
  • Other Markdown Resources

Was this helpful?

Edit on GitHub
  1. README

Markdown

PreviousLorem ipsumNextMy Favorite VSCode Themes

Last updated 3 years ago

Was this helpful?

Markdown:

Why markdown?

Markdown is a universal doc format that is easy to write and easy to add to a version control system.

  • Open - Anyone can submit content, fix typos & update anything via pull requests

  • Version control - Roll back & see the history of any given post

  • No CMS lock in - We can easily port to any static site generator

  • It's just simple - No user accounts to manage, no CMS software to upgrade, no plugins to install.


Markdown basics

The basics of markdown can be found & . Super easy!

Advanced Formatting tips

left alignment

This is the code you need to align images to the left:

<img align="left" width="100" height="100" src="http://www.fillmurray.com/100/100">

right alignment

This is the code you need to align images to the right:

<img align="right" width="100" height="100" src="http://www.fillmurray.com/100/100">

center alignment example

<p align="center">
  <img width="460" height="300" src="http://www.fillmurray.com/460/300">
</p>

collapse Sections

Collapsing large blocks of text can make your markdown much easier to digest

"Click to expand"

this is hidden block

<details>
<summary>"Click to expand"</summary>
this is hidden
</details>

Collapsing large blocks of Markdown text

To make sure markdown is rendered correctly in the collapsed section...
  1. Put an empty line after the <summary> block.

  2. Insert your markdown syntax

  3. Put an empty line before the </details> tag

<details>
<summary>To make sure markdown is rendered correctly in the collapsed section...</summary>

 1. Put an **empty line** after the `<summary>` block.
 2. *Insert your markdown syntax*
 3. Put an **empty line** before the `</details>` tag

</details>

additional links

[Website](http://www.serverless.com) • [Email Updates](http://eepurl.com/b8dv4P) • [Gitter](https://gitter.im/serverless/serverless) • [Forum](http://forum.serverless.com) • [Meetups](https://github.com/serverless-meetups/main) • [Twitter](https://twitter.com/goserverless) • [Facebook](https://www.facebook.com/serverless) • [Contact Us](mailto:hello@serverless.com)

Badges

I hate them so. Don't use badges.


Nice looking file tree

# Code & components for pages
./src/*
  ├─ src/assets - # Minified images, fonts, icon files
  ├─ src/components - # Individual smaller components
  ├─ src/fragments - # Larger chunks of a page composed of multiple components
  ├─ src/layouts - # Page layouts used for different types of pages composed of components and fragments
  ├─ src/page - # Custom pages or pages composed of layouts with hardcoded data components, fragments, & layouts
  ├─ src/pages/* - # Next.js file based routing
  │  ├─ _app.js - # next.js app entry point
  │  ├─ _document.js - # next.js document wrapper
  │  ├─ global.css - #  Global CSS styles
  │  └─ Everything else... - # File based routing
  └─ src/utils - # Utility functions used in various places

Useful packages

YAML front-matter is your friend. You can keep metadata in markdown files

title: Serverless Framework Documentation
description: "Great F'in docs!"
menuText: Docs
layout: Doc

Useful for rendering markdown in HTML/React


Useful utilities

Show DEMO

Show DEMO


How Serverless uses markdown

Serverless.com is comprised of 3 separate repositories

  • https://github.com/serverless/blog

  • https://github.com/serverless/site

Why multiple repos?

  1. We wanted documentation about the framework to live in the serverless github repo for easy access

  2. We wanted our blog content to be easily portable to any static site generator separate from the implementation (site)

  3. prebuild npm script pulls the content together & processes them for site build

A single repo is easier to manage but harder for people to find/edit/PR content.


DEMO

  • Site structure

  • Serverless build process

  • Github optimizations

    • consider linking everything to site

Other Markdown Resources

• • • • • • •

For whatever the graphql syntax will nicely highlight file trees like below:

Show automatic doc generation. |

- Post scheduler for static sites

& - Good Editors

- Flow charts for days

- Make gifs

Stuck on WordPress? Try

https://github.com/serverless/serverless | Shoutout to

use markdown magic =) to etc

- Documentation generator for GitHub projects

- Markdown alternative

Website
Email Updates
Gitter
Forum
Meetups
Twitter
Facebook
Contact Us
reason
gray-matter
Remark
Markdown Magic
Repo
Plugins
Example 1
Example 2
Schedule Posts
Zero friction inline content editing
Byword
Typora
Monodraw
Kap
IDE markdown preview
easy-markdown plugin
Phenomic.io
Validation
Editing Flow
Link from top of each doc to live link on site
auto generate tables
Hide yaml frontmatter from github folks
Verb
ACSII docs
here
here