前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >github-markdown-css使用说明!

github-markdown-css使用说明!

原创
作者头像
Learn-anything.cn
发布2021-11-27 07:09:05
1.3K0
发布2021-11-27 07:09:05
举报
文章被收录于专栏:learn-anything.cn
简介及使用步骤

将markdown字符串转换成html后,可以用此插件来改变页面样式,使得页面呈现为 github样式 ,样式效果看这里

1、安装插件:

$ npm install github-markdown-css

2、新建github-markdown.css文件,内容如下:
代码语言:txt
复制
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
3、import "github-markdown.css"到项目中;
4、在markdown的父容器中增加markdown-body样式:
代码语言:txt
复制
<article class="markdown-body">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>

相关链接

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介及使用步骤
    • 1、安装插件:
      • 2、新建github-markdown.css文件,内容如下:
        • 3、import "github-markdown.css"到项目中;
          • 4、在markdown的父容器中增加markdown-body样式:
          • 相关链接
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档