设为首页收藏本站域名注册淘宝
便宜云服务器网站加速

欧卡2中文社区

 找回密码
 立即注册

QQ登录

只需一步，快速开始

需要三步，才能开始

只需两步，慢速开始

社区推荐： 寻路中国组合图 寻路中国独立图 欧卡Mod技术 欧卡问答 综合讨论区 Mod分享 ☜地图项目☞ 访问推广 每日签到
站内应用： ☜导读☞ 勋章中心 道具中心 论坛任务 收藏 排行榜 我的好友 幻灯片 淘贴 积分充值 ☜VIP☞ 账号激活
欧卡2中文社区»首页 › ☆技术宅☆ › 技术宅基地 › notepad++ markdown实时预览
欧卡2入门方向盘选莱仕达V9莱仕达折叠便携游戏方向盘支架欢迎地图Mod入驻
返回列表 发新帖
查看: 14952|回复: 1
收起左侧

[开源] notepad++ markdown实时预览

[复制链接]
知行 发表于 2015-6-30 00:47 | 显示全部楼层 |阅读模式

Notepad++配置Markdown实时预览

NppMarkdown插件实现了Markdown的实时预览，但是缺乏可定制性，不能定义HTML的样式。本文介绍另外一个插件，Preview HTML，配合Pandoc，可以实现更好的HTML预览，例如可以引入自定义CSS和JS，显示高亮代码和$Mathjax$公式等。

环境要求

  • 安装pandoc并且配置了Path
  • 安装Notepad++插件Preview HTML，注意应从官网下载最新版，Plugin Manager里的可能不是最新版

配置插件

直接在插件菜单中编辑配置文件，会在%APPDATA%\Notepad++下创建相关配置文件。

  1. Edit Filter definitions，设置过滤器，调用pandoc转换为html，格式如下

    ; Content of Filter.ini file
[Markdown]
Extension=.md
Command=pandoc --template=tpl.html5 --highlight-style=tango --mathjax="http://cdn.bootcss.com/mathjax/2.5.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML" "%1"
  2. Edit Settings，设置自动刷新间隔，格式如下 
    [Autorefresh]
Interval=0

展示

总结

  1. 不足之处是pandoc处理速度毕竟不如NppMarkdown内建的解析器快，如果设置为实时刷新，写作会有些卡壳的感觉，可以考虑自动刷新间隔设置长一些
  2. 预览窗口不能随着写作窗口自动滚动

参考资料

  1. How to use markdown in notepad++
  2. Live LaTeX in Notepad++

附录

html文件模板代码

<!DOCTYPE html>
<html$if(lang)$ lang="$lang$"$endif$>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="pandoc">
$for(author-meta)$
  <meta name="author" content="$author-meta$">
$endfor$
$if(date-meta)$
  <meta name="dcterms.date" content="$date-meta$">
$endif$
  <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="templates/css/bootstrap-combined.min.css" rel="stylesheet">
  <style type="text/css">
  body {
    font-size:16px;
    line-height:24px;
}

.sidebar-nav-fixed {
    position:fixed;
    top:84px;
    width:16.48%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (min-width: 980px) {
    .title {
        width:940px;
    }
    .container-fluid {
        width:940px;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: black;
    background: none;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: .5em;
    padding-bottom: .17em;
}

h1 {
    font-size:32px;
    border-bottom: 4px double #aaa;
}

h2 {
    font-size:24px;
    border-bottom: 1px solid #aaa;
}

h3 {
    font-size:21px;
}

h1, h2 {
    margin-bottom:.6em;
    line-height:1.1em;
}

h3, h4, h5 {
    margin-bottom:.3em;
}

img {
    border-style: solid; 
    border-width: 0px;
    width:90%;
}

#TOC > ul {
    margin:0;
}

#TOC > ul > li {
    font-size:16px;
    line-height:24px;
    list-style-type:none;
}

#TOC > ul > li > ul > li {
    font-size:16px;
    line-height:24px;
}

#TOC > ul > li > ul > li > ul {
    display:none;
    /*font-size:14px;
    line-height:20px;*/
}

blockquote > p {
    font-size:16px;
}

.table {
    width:auto;
}

sup, sub {
    line-height: 1em;
}

header {
    position:static;
    width:100%;
    overflow:visible;
    display:block;

    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    background-repeat: repeat-x;
    border: 1px solid #d4d4d4;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
}

.title {
    color:#555555;
    border-bottom:0;
    font-size:20px;
    padding: .5em;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
}

nav li:focus {
    background-color:#EEEEEE;
}

nav a:hover {
    text-decoration:none;
}

.title > a {
    color:#555555;
}

.title a:hover {
    text-decoration:none;
}

.container-fluid {
    margin-left:auto;
    margin-right:auto;
    padding: 2em 0 4em 0;
}
  </style>
  <style type="text/css">code{white-space: pre;}</style>
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
$if(quotes)$
  <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
$endif$
$if(highlighting-css)$
  <style type="text/css">
$highlighting-css$
  </style>
$endif$
$for(css)$
  <link rel="stylesheet" href="$css$">
$endfor$
$if(math)$
  $math$
$endif$
$for(header-includes)$
  $header-includes$
$endfor$
</head>
<body>
$for(include-before)$
$include-before$
$endfor$
<!-- doc title / page header -->
$if(title)$
<header>
<h1 class="title">$title$</h1>
$for(author)$
<!--<h2 class="author">$author$</h2>-->
$endfor$
$if(date)$
<!--<h3 class="date">$date$</h3>-->
$endif$
</header>
$endif$
<div class="container-fluid">
<div class="row-fluid">
$if(toc)$
<div class="span4">
<nav id="$idprefix$TOC" class="sidebar-nav sidebar-nav-fixed">
$toc$
</nav>
</div>
$endif$
<div class="span8">
$body$
<hr>
$for(include-after)$
$include-after$
$endfor$
</div><!--/row-->
</div><!--/container-->
</body>
</html>

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复 打印

使用道具 举报

 楼主| 知行 发表于 2015-7-2 15:40 | 显示全部楼层 
; Content of Filter.ini file
[Markdown]
Extension=.md
Command=pandoc --template=tpl.html5 --highlight-style=tango --mathjax="http://cdn.bootcss.com/mathjax/2.5.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML" "%1"
回复 支持 反对 打印

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

联系我们|手机版|欧卡2中国 ( 湘ICP备11020288号-1 )

GMT+8, 2024-4-27 09:41 , Processed in 0.080951 second(s), 8 queries , Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表