首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >github-markdown-css使用说明!

github-markdown-css使用说明!

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

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

1、安装插件:

$ npm install github-markdown-css

2、新建github-markdown.css文件,内容如下:
代码语言:txt
AI代码解释
复制
.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
AI代码解释
复制
<article class="markdown-body">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>

相关链接

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
7b2美化-添加好看的底部介绍
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
7600
7b2美化-添加好看的底部介绍
css基础教程之尺寸与补白
content-box 默认值,padding和border不被包含在定义的width和height之内,会被padding撑开
老雷PHP全栈开发
2020/07/02
4810
wordpress添加友情链接页面CSS样式带效果图
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/16
7970
wordpress添加友情链接页面CSS样式带效果图
【前端词典】提高幸福感的 9 个 CSS 技巧
在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用,觉得挺高效实用,所以也就有了这篇文章。
小生方勤
2019/05/31
7560
【Html.js——页面布局】个人博客(蓝桥杯真题-1766)【合集】
通过以上步骤,HTML 和 CSS 代码协同工作,实现了一个具有导航栏、首页 banner、文章列表和右侧栏的个人博客页面布局。
Rossy Yan
2025/01/24
1670
【Html.js——页面布局】个人博客(蓝桥杯真题-1766)【合集】
增加了站内搜索功能
如题,我花了一个多小时,参照nuxt文档,把搜索功能给加上了,url地址 /search ,记录一下相关代码。
子舒
2022/06/09
4930
Hexo博客Next主题相册搭建
Hexo博客Next主题相册搭建 在blog文件夹/source下创建photos文件夹,在photos文件夹创建index.md文件,编辑index.md文件,写入以下代码:
AomanHao
2022/01/14
4860
在WordPress中使用Markdown进行写作的正确姿势
在wordpress中使用markdown语法来进行写作,是很多wordpress博主都要想到的一点。虽然说现在wordpress已经“原生”支持wordpress语法,但是还是有很多的瑕疵,也并不实用,当然也有众多的markdown的插件:
老潘
2018/06/21
15.2K0
在WordPress中使用Markdown进行写作的正确姿势
阅读Skeleton.css源码,改善睡眠质量(尽管它只有419行代码)
虽然现在大部分业务都不需要重复造轮子了,但对于小白来说,学习完 Skeleton 源码 是能走出新手村的。
德育处主任
2022/04/17
8120
阅读Skeleton.css源码,改善睡眠质量(尽管它只有419行代码)
Bootstrap 响应式框架 第一集
响应式:Responsive Web Page,又称为自适应网页,一个页面既可以在PC浏览器中正常访问,也可以在手机/平板中正常访问。而且会配合不同的设备有不同的显示结果。
李才哥
2020/08/17
1.3K0
Bootstrap 响应式框架  第一集
全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(2)
描述: 由于篇幅过长的原因,作者将CSS布局文章分为两个小节,前面相信大家已经跟着【WeiyiGeek】作者一起学习了CSS Flexbox以及网格布局的基础知识了,现在我们在此基础上继续深入学习CSS 多列布局、浮动布局以及了解表格布局及其他传统布局,它是学习CSS之路上一个重点,是在进行前端开发时常常使用到的,所以说我们需要认真学习,若有不懂的地方可以在文章末尾,以及作者交流群【在公众号回复微信交流群】进行留言交流。
全栈工程师修炼指南
2023/10/31
5240
全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(2)
动手练一练,做一个现代化、响应式的后台管理首页
大家好,今天我们将一起从零开始纯手工建一个后台管理首页。关于后台管理模板,每个公司的要求都不一样,有的能用就行也丑不丑无所谓,或者用个开源模板凑合下就行啦。如果接到这样后台管理需求,我也是从网上下载改改而已,从没想过自己动手建一个。因为从零开始建一个漂亮完善的后台管理模板实在太费功夫了,交互样式的代码量不亚于业务代码的工作量。
前端达人
2020/02/29
1.2K0
动手练一练,做一个现代化、响应式的后台管理首页
css页面自适应屏幕大小_html图片自适应屏幕
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170364.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/21
8.6K0
css页面自适应屏幕大小_html图片自适应屏幕
基于Openresty搭建本地简易文档中心
OpenResty 是一个强大的 Web 应用服务器,Web 开发人员可以使用 Lua 脚本语言调动 Nginx 支持的各种 C 以及 Lua 模块,更主要的是在性能方面,OpenResty可以 快速构造出足以胜任 10K 以上并发连接响应的超高性能 Web 应用系统。
品茗IT
2023/10/22
4280
基于Openresty搭建本地简易文档中心
JS:用rem来做响应式开发
电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己用原生写,响应式开发(我现在知道的尚浅)目前我了解有
yuezhongbao
2019/03/13
6.5K0
JS:用rem来做响应式开发
利用css 设计markdown 主题
Markdown 入门 :文章目录生成、合并单元格、文章快速插入链接(使用剪切板的链接插到选中文字)【修订】
公众号iOS逆向
2021/07/29
5760
亿点点玩 CSS | 水平渐变 linear-gradient
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body
张风捷特烈
2021/02/26
5520
亿点点玩 CSS | 水平渐变 linear-gradient
不可忽视的CSS布局
CSS布局是一个前端必备的技能,HTML如果说是结构之美,CSS就是视觉之美可以给用户不一样的体验的效果和视觉冲击。如果一个大方美观的布局,用户第一眼看到会很舒服,不仅提高了用户的视觉效果也提高了用户的体验效果。随着现在设备种类的增多,各种大小不一,奇形怪状的设备使得前端开发的压力不断增大,越来越多的UI框架层出不群,我们就会忽略了最基本的CSS,下面总结了一些经常用到的CSS布局,一起学习和进步。
小丑同学
2020/09/21
6740
一份Markdown Here样式送给你
如果你还不知道什么是markdown,那么,推荐你去好好了解一下这个富文本语言,下一篇文章就是了。如果你还不知道什么时markdown here,推荐你去看这篇文章:
分享者
2022/05/17
3430
一份Markdown Here样式送给你
CSS入门指南-4:页面布局
display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
goodspeed
2020/12/22
2.6K0
CSS入门指南-4:页面布局
相关推荐
7b2美化-添加好看的底部介绍
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档