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 文件,在对应的样式加载代码后面,添加如下代码:

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

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

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

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

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

改造三 :修改打印样式

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

  1. @media print {
  2. body{width: 21cm;margin:0;padding:0;}
  3. .content{
  4. width: 88%;
  5. background-color: #F8F8F8;
  6. border:1px solid #ccc;
  7. box-shadow:0 0 10px #999;
  8. line-height:1.4em;
  9. font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", helvetica, arial, freesans, clean, sans-serif;
  10. font-size:13.34px;
  11. color:black;
  12. }
  13. #markdown-outline, #markdown-backTop, #markdown-outline ul, #markdown-outline ul:first-child, #markdown-outline li{
  14. display: none;
  15. padding: 0;
  16. margin: 0;
  17. width:0;
  18. }
  19. }

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. SDUTOJ 2826 小P寻宝记——好基友一起走

    #include<iostream> #include<memory.h> using namespace std; int dp[10010]; int max(int a, ...

  2. phpcms v9中 action=&quot;position&quot; 和action=&quot;lists&quot;有什么差别, 以及action 的属性和值

    action值的含义: lists 内容数据(文章?)列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 position 内容推荐位列表

  3. best-time-to-buy-and-sell-stock系列——先买入后卖出股票的最大值

    1. Say you have an array for which the i th element is the price of a given stock on day  i . If you ...

  4. Spring MVC传值乱码解决

    在web.xml中进行配置,加入以下代码: <!-- 乱码解决 --> <filter> <filter-name>characterEncodingFilter& ...

  5. POJ 2309 BST

    BST Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8565   Accepted: 5202 Description C ...

  6. .net 反射访问私有变量和私有方法 如何创建C# Closure ? C# 批量生成随机密码,必须包含数字和字母,并用加密算法加密 C#中的foreach和yield 数组为什么可以使用linq查询 C#中的 具名参数 和 可选参数 显示实现接口 异步CTP(Async CTP)为什么那样工作? C#多线程基础,适合新手了解 C#加快Bitmap的访问速度 C#实现对图片文件的压

    以下为本次实践代码: using System; using System.Collections.Generic; using System.ComponentModel; using System ...

  7. asp识别手机端

    <script type="text/javascript"> var mobileAgent = new Array("iphone", &quo ...

  8. 【caffe-windows】 caffe-master 之图片转换成lmdb or leveldb

    前期准备: 文件夹train:此文件夹中按类别分好子文件夹,各子文件夹里存放相应图片 文件夹test:同train,有多少类就有多少个子文件夹 trainlabels.txt : 存的是训练集的标签  ...

  9. Mvc创建并注册防盗链

    创建CustomHandler.JpgHandler public class JpgHandler : IHttpHandler { public void ProcessRequest(HttpC ...

  10. EasyPusher手机直播编码推送之图像旋转90度后画面重复的问题

    本文转自EasyDarwin开源团队开发Holo的博客:http://blog.csdn.net/holo_easydarwin 最初在做EasyPusher手机直播的时候遇到过一个问题:手机竖屏推送 ...