• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

DavidWells/advanced-markdown: Learn about advanced markdown techniques

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

DavidWells/advanced-markdown

开源软件地址(OpenSource Url):

https://github.com/DavidWells/advanced-markdown

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

Advanced Markdown Guide

Slides -> github.com/DavidWells/advanced-markdown

Table of Contents

"Click to expand"

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 here & here. 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>

Adding video

To add video you need to upload your video file and reference it inline

https://user-images.githubusercontent.com/1702215/158075475-c23004ab-827a-45ad-bdba-aee29ac5b582.mp4

Example:

demo.mp4

light/dark mode images

Tip via this tweet. Swap out images based on theme settings

![Logo](./dark.png#gh-dark-mode-only)
![Logo](./light.png#gh-light-mode-only)

Using footnotes

Here is a simple footnote1. With some additional text after it.

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

Tiny text in markdown

Normal text here.

Tiny text is here. Awwwww its so cuteeeeeeeeeee

How?

<sup><sub>Add your tiny text</sub></sup>

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

WebsiteEmail UpdatesGitterForumMeetupsTwitterFacebookContact Us

[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

CI Package Manager CI Web SIte Known Vulnerabilities Coverage Status js-standard-style


Nice looking file tree

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

# 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

  1. gray-matter

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
  1. Remark

Useful for rendering markdown in HTML/React

  1. Markdown Magic

Useful utilities

  1. Schedule Posts - Post scheduler for static sites

Show DEMO

  1. Zero friction inline content editing

Show DEMO

  1. Byword & Typora - Good Editors

  2. Monodraw - Flow charts for days

  3. Kap - Make gifs

  4. IDE markdown preview

  5. Stuck on WordPress? Try easy-markdown plugin


How Serverless uses markdown

Serverless.com is comprised of 3 separate repositories

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

Other Markdown Resources

Footnotes

  1. Example footnote




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap