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. 深入理解vue路由的使用

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应 ...

  2. Redis Sentinel 情况下bind地址设置

    Redis Sentinel 情况下bind地址设置 1个master,2个slave,3个sentinel的情况下,注意bind地址的时候不要写0.0.0.0,会导致绑定多个地址, 然后sentin ...

  3. 实现TextView中link的点击效果

    朋友们,你们在TextView处理link的时候是不是一直被苦逼的android默认的方式困扰?每次点击link的时候,点击效果是整个textview来响应.非常烂吧?原因就不多赘述了. 那么以下这个 ...

  4. Linux多线程编程的条件变量

    在stackoverflow上看到一关于多线程条件变量的问题,题主问道:什么时候会用到条件变量,mutex还不够吗?有个叫slowjelj的人做了很好的回答,我再看这个哥们其他话题的一些回答,感觉水平 ...

  5. Oracle 索引 简单介绍

    1 索引的创建语法: CREATE UNIUQE | BITMAP INDEX <schema>.<index_name>       ON <schema>.&l ...

  6. JavaScript读书笔记(3)-操作符、语句和函数

    1.  操作符 (1)       一元操作符 前置递增和递减操作符,变量的值都是在语句被求值以前改变的:后置相反 (2)       位操作符 在ECMAScript中,对数值进行位操作时,会发生以 ...

  7. 通过代码实现自动判断是手机端还是PC端跳转

    <!-- 2017/09/13 跳转手机页面 start by 小鬼PSer --> <meta name="mobile-agent" content=&quo ...

  8. JMeter中使用Put请求方式请求接口

    前言 现在有如下接口,是以PUT的方式请求的: 请求URL:IP+Port+/api/v1/apps/{appId} 请求参数: 参数名 必选 类型 nameCn 是 string nameEn 是 ...

  9. 功能强大的Xcode辅助工具Faux Pas:帮你找到各种隐形的bug

    本文转载至 http://www.cocoachina.com/industry/20140804/9307.html Faux Pas(Beta版下载地址)是一个Xcode辅助工具,用以检查Xcod ...

  10. Node.js安装及环境配置(windows)

    1.Node.js简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用 ...