Markdown Reader 是一款比较好用的浏览markdown文件的chrome插件

插件地址:https://chrome.google.com/webstore/detail/markdown-reader/gpoigdifkoadgajcincpilkjmejcaanc

准备工作

  1. 从应用商店安装扩展
  2. 打开chrome插件管理(chrome://extensions)找到插件对应的ID
  3. %USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\Extensions 找到对应的目录
  4. 将插件主体复制出来,删除其中的 _metadata 目录
  5. 修改 manifest.json 文件,删除 update_url 项,修改 web_accessible_resources 项的内容为: [ "*.*" ]
  6. 选择chrome插件管理的 开发者模式 ,并 加载已解压的扩展程序...
  7. 勾选 允许访问文件网址

改造一 :链接新标签页(窗口)打开

修改 markdownreader.js 文件,在对应的样式加载代码后面,添加如下代码:

var baseTarget = document.createElement('base');
baseTarget.target = '_blank';
document.head.appendChild(baseTarget);

改造二 :添加 font awesome 图标支持

下载最新的 Font Awesome 源码包 ,解压缩后将文件放入工作目录。

修改 markdownreader.js 文件,在对应的样式加载代码后面,添加如下代码:

link = document.createElement('link');
link.rel = 'stylesheet';
link.href = chrome.extension.getURL('font-awesome-4.6.3/css/font-awesome.min.css');
document.head.appendChild(link);

改造三 :修改打印样式

修改 markdownreader.css 文件,在最后面,添加如下代码:

@media print {
body{width: 21cm;margin:0;padding:0;}
.content{
width: 88%;
background-color: #F8F8F8;
border:1px solid #ccc;
box-shadow:0 0 10px #999;
line-height:1.4em;
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", helvetica, arial, freesans, clean, sans-serif;
font-size:13.34px;
color:black;
}
#markdown-outline, #markdown-backTop, #markdown-outline ul, #markdown-outline ul:first-child, #markdown-outline li{
display: none;
padding: 0;
margin: 0;
width:0;
}
}

Markdown Reader 插件改造的更多相关文章

  1. JS检测浏览器Adobe Reader插件

    Web应用中当我们希望向用户显示pdf文档时候,如果用户安装了Adobe Reader之类的pdf阅读器,就可以直接打开文档在浏览器中显示, 但是,当用户没有安装这类软件的时候,自然是打不开的,为了系 ...

  2. 异常强大的Markdown编辑插件-Markdown Preview Enhanced

    最近使用Markdown写作,了解到以下这些Markdown写作工具 MaHua 在线markdown编辑器 百度搜索Markdown时,它排在非常靠前的位置 马克飞象- 专为印象笔记打造的Markd ...

  3. 苹果下如果安装nginx,给nginx安装markdown第三方插件

    用brew install nginx 这样安装的是最新版的nginx, 但是在有些情况下,安装第三方插件需要特定的版本,更高一级的版本可能装不上. 它的原理是下载安装包进行自动安装,建立软链,这样就 ...

  4. markdown绘图插件----mermaid简介

    作者:黄永刚 mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点 ...

  5. sublime text 3插件改造之添加从模版新增文件到指定目录

    简介:以前使用ST2里面的Sublime NFFT插件比较顺手,最近安装了ST3,但是Sublime NFFT插件不支持ST3,就下载了SublimeTmpl从模版新建文件插件.在使用时,习惯在侧边栏 ...

  6. Windows Live Writer 代码插件改造

    源码和插件都在后面,如果不想看我神神叨叨的可以直接到文章后面下载 一 .找插件 在使用Windows Live Writer 经常要用到插入代码的功能,根据博客园中教程,分别使用了: WindowsL ...

  7. 【转】Windows Live Writer 代码插件改造

    源码和插件都在后面,如果不想看我神神叨叨的可以直接到文章后面下载 一 .找插件 在使用Windows Live Writer 经常要用到插入代码的功能,根据博客园中教程,分别使用了: WindowsL ...

  8. [软件]在浏览器里添加MarkDown Here(插件)

    1. 先来说说这个插件的作用是什么: 用于在网页一些编辑文本的地方, 使用MacDown编辑文本 支持大部分浏览器,  https://github.com/adam-p/markdown-here ...

  9. select2插件改造之设置自定义选项 源码

    改造特性: 适应业务需要,选项里面包含“其他”其它”,可以点击填写并设置自定义选项 效果图: 具体代码不做阐述,如有类似需求,请私信.主要源码: /* Copyright 2012 Igor Vayn ...

随机推荐

  1. android wifi相关模块 命令列表 汇总

    static final int BASE =Protocol.BASE_WIFI;  131072 static final intCMD_START_SUPPLICANT  = BASE +11; ...

  2. 一个Netfilter nf_conntrack流表查找的优化-为conntrack添加一个per cpu cache

    独悲须要忍受.快乐须要分享对Linux协议栈多次perf的结果,我无法忍受conntrack的性能,然而它的功能是如此强大,以至于我无法对其割舍,我想自己实现一个高速流表.可是我不得不抛弃依赖于con ...

  3. Git以及github的使用方法(一)安装并设置git用户

    最早Git是在Linux上开发的,很长一段时间内,Git也只能在Linux和Unix系统上跑.不过,慢慢地有人把它移植到了Windows上.现在,Git可以在Linux.Unix.Mac和Window ...

  4. 《C程序猿:从校园到职场》出版预告(4):从“散兵游勇”到“正规部队”

    看过电视剧<楚汉传奇>的朋友应该对这个场景还有印象:当刘邦第一次去找项羽帮忙的时候.他们一行人看到了项羽军营是怎样练兵的.想到自己练兵的方法,当时就震惊了."刘家军"就 ...

  5. [Android5 系列—] 1. 构建一个简单的用户界面

    前言 安卓应用的用户界面是构建在View 和ViewGroup 这两个物件的层级之上的. View 就是一般的UI组件.像button,输入框等. viewGroup 是一些不可见的view的容器,用 ...

  6. CentOS7配置opencv for python && eclipse c/c++[更新]

    更改前的安装过程有些问题,主要是ffmpeg-devel的安装部分,这里重新说一下 两种安装方法: 第一种,直接: # yum install numpy opencv* 这种方法安装了之后,能够在p ...

  7. Android数据自己主动更新库DataAutoRefresh

    非常多android应用.比方音乐播放器.视频播放器.小说阅读器或者其他须要获取本地磁盘指定数据格式数据列表的应用,在磁盘数据有变化(新增或者删除.比方下载完毕,拔TF卡.换TF卡)时.须要自己主动更 ...

  8. Python实战之自己主动化评论

    Python实战之自己主动化评论 玩csdn博客一个多月了,渐渐发现了一些有意思的事,常常会有人用相同的评论到处刷.不知道是为了加没什么用的积分,还是纯粹为了表达楼主好人.那么问题来了,这种无聊的事情 ...

  9. 关于arr.map()问题

    最近看map实现原理, Array.prototype._map = function(fn, context) { console.log(fn, context) var temp = []; i ...

  10. AngularJs 在控制器中过滤

    <html> <head> <title>Simple app</title> <script src="https://ajax.go ...