• Posts tagged "markdown"

Blog Archives

用R编写markdown格式文档

R的极客理想系列文章,涵盖了R的思想,使用,工具,创新等的一系列要点,以我个人的学习和体验去诠释R的强大。

R语言作为统计学一门语言,一直在小众领域闪耀着光芒。直到大数据的爆发,R语言变成了一门炙手可热的数据分析的利器。随着越来越多的工程背景的人的加入,R语言的社区在迅速扩大成长。现在已不仅仅是统计领域,教育,银行,电商,互联网….都在使用R语言。

要成为有理想的极客,我们不能停留在语法上,要掌握牢固的数学,概率,统计知识,同时还要有创新精神,把R语言发挥到各个领域。让我们一起动起来吧,开始R的极客理想。

关于作者:

  • 张丹,分析师/程序员/Quant: R,Java,Nodejs
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/r-markdown-rmarkdown/

前言

Markdown格式文档编写,已经从小众成为了一种主流的文档编写方式。R语言社区在可重复性文档编写领域中,有着重要的贡献。knitr和rmarkdown等包的支持,到后来在RStudio中直接集成的rmarkdown的功能,让R的广大用户有了非常舒服的markdown文档使用体验。

2015时,我就已经开始用markdown来写书稿,当时写了2篇关于在nodejs领域中使用markdown的文章,Marked高效的Markdown解析器用WebStorm编辑Markdown

时光证明了,小而美的好东西,真的会放大光芒。改变用户使用习惯,从小而美开始。

目录

  1. 创建一个rmarkdown文档
  2. 嵌入markdown文本
  3. 嵌入R代码
  4. 嵌入DT动态表格
  5. 嵌入echarts动态图
  6. 嵌入数学公式

1. 创建一个rmarkdown文档

写文档的常规操作是用word,程序员写文档的常规操作是用IDE的编程工具,用markdown格式来写文档,最后可生成word、pdf、html等文档。

我们今天讲讲怎么用R语言来写文档吧,那么R语言对markdown的支持包是rmarkdown包,现在新版的RStudio开发工具,已经集成了rmarkdown包,我们直接在RStudio中操作就行了。

首先我们先打开RStudio开发工具,选择新建一个R Markdown文件。

选择Document文档格式,设置Title, Author, Date等基本信息,然后可以选择文档输出格式HTML, PDF, Word的三种选择,不同的格式输出需求本机已经安装对应的其他软件。

打开新创建的文档,默认会是一个模板,以rmarkdown的格式进行展示,上面所输入的参数,在文档都的开头部分都有展示。然后保存一下文件。

我们可以点击Knit的下拉菜单,选择输出为HTML。

然后,运行Knit就会新打开一个窗口,看到HTML的网页输出。

如果想输出为word格式,重新选择 Knit到word就行了,运行后会弹出word的新生成的文件。

一通操作下来,功能切换很是顺畅,体验非常舒服。那么接下来就在rmarkdown中,加入各种元素,让整个文档丰富起来。

2. 嵌入markdown文本

在rmarkdown中嵌入markdown文本,是最基本的操作,在默认生成的文档中,就是一个带有markdown格式的文本。markdown格式的文本,包括10种主要的格式,分别是标题,字体,引用,分隔,图片,链接,列表,表格,代码。

2.1 标题
标题支持六级标题,用#做为开头,#的数量表示是几级标题。


# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题


图中,左边中编辑界面,右边是HTML的输出界面。

2.2 字体
字体格式设置有2种方法,一种是就markdown默认支持的4种格式,加粗,斜体,斜体加粗,删除线。另一种方法就是使用html的标签<font>来进行设置。


**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

<font face="宋体">宋体</font>
<font face="宋体" color="red">红色宋体</font>
<font face="宋体" color="red" size="5">5号红色宋体</font>

2.3 引用
使用>用于表示引用外部的一段话,在引用中可以用\来进行换行。


> 我要引用一段文字\
\
R语言作为统计学一门语言,一直在小众领域闪耀着光芒。直到大数据的爆发,R语言变成了一门炙手可热的数据分析的利器。随着越来越多的工程背景的人的加入,R语言的社区在迅速扩大成长。现在已不仅仅是统计领域,教育,银行,电商,互联网….都在使用R语言。

2.4 分隔

在markdown中,可以通过3个连续的-或*,来设置分隔符。


--开始

---

**开始

********************

结束

2.5 图片
插入图片时,需要使用![文本说明](链接)语法。


![R的极客理想](http://fens.me/images/slider/img4.png)


2.6 链接
设置超级链接,有2种写法,一种就是[显示文字](链接),另一种是<链接>。


[粉丝日志博客](fens.me)

<http://www.fens.me>

2.7 列表
列表支持3种语法,一种是无序列表,二是有序列表,三是嵌套列表。

  • 无序列表,用 – + * 任何一种都可以,跟内容之间都要有一个空格
  • 有序列表,用数字加点,跟内容之间都要有一个空格
  • 嵌套列表,上一级和下一级之间有三个空格,跟内容之间都要有一个空格

无序列表

+ 列表内容
+ 列表内容
+ 列表内容

有序列表

1. 列表内容
2. 列表内容
3. 列表内容

无序列表嵌套

+ 1 列表内容
   + 1.1 列表内容
   + 1.2 列表内容
+ 2 列表内容
+ 3 列表内容

2.8 表格
在嵌入表格时,需求包括表头行,分隔符行,表体行。表头行用|分隔,表体行也用|分隔,分隔符行需要用–|组合进行分隔。当希望单元格整列对齐时,可以分隔符行加:来控制对齐,文字默认居左,两边加表示文字居中,右边加:表示文字居右。


表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

表头|表头|表头
--|--|--
内容|内容|内容
内容|内容|内容


2.9 代码
代码的嵌入可以分为行内代码嵌入代码和代码块。

  • 行内代码,需要使用”包住代码,代码不可换行。
  • 代码块,需要用“` “`来包住代码,代码可换行。

文字中内嵌了`a="abc"`代码

```
a="abc"
a1=2
a2=3
a3=a1+a2
```

Markdown的基本语法,就是这9部分很简单,写一次练习一下,就记住了。

3. 嵌入R代码

上面我们演示了在markdown中嵌入代码,那么对于R语言来说,如果我们希望嵌入R代码,需要代码块针对R代码做一些支持的时候,要怎么写呢。


```{r}
a<-Sys.Date()
a

head(iris)
plot(iris)
```

接下来,我们还可以在{r echo=FALSE}加入echo=FALSE,这样就不输出R的代码本身了。


```{r echo=FALSE}
library(xts)
xdf<-xts(rnorm(100),order.by = as.Date('2022-01-01')+1:100)
plot(xdf)
```

4. 嵌入DT动态表格

在R的代码中,我们可以调用R的各种包进行输出,可以使用DT包来做动态表格,只要把数据放到datatable()函数中,就可以在markdown中生成对应的动态表格,支持翻页、关键字搜索,排序等多种功能。


```{r}
library(DT)
datatable(iris)
```

5. 嵌入echarts动态图

在文档输出时,经常需要用图进行展示,我们也可以直接使用echart4r包来调用echarts进行多种图的可视化展示。


```{r}
library(echarts4r)
library(magrittr)
iris %>% 
  e_charts(x = Sepal.Length) %>%
  e_scatter(serie = Sepal.Width )
```

6. 嵌入数学公式

文档中,也避免不了经常会写一些数据公式 ,rmarkdown中也集成是嵌入数据公式的功能。我们可以直接使用$$公式$$的语法,来生成复杂的数学公式。在文档中加入数学公式,是使用mathjax格式来进行数学公式的编辑。


$$
\hat\beta_1=\frac{\sum\left(X_i-\overline{X}\right)Y_i}{\sum\left(X_i-\overline{X}\right)^2}=\frac{\sum X_iY_i-\overline{X}\sum Y_i}{\sum X_i^2+\sum \overline{X}^2 - 2\overline{X}\sum X_i}\\
=\frac{\sum X_iY_i-\overline{X}*N\overline{Y}}{\sum X_i^2+N\overline{X}^2 - 2\overline{X}*N\overline{X}}
=\frac{\sum^{N}_{i=1} X_iY_i-N\overline{XY}}{\sum^{N}_{i=1}Xi^2-N\overline{X}^2}
$$

本文我介绍了rmarkdown的功能,有非常丰富的支持,多样的表达形式,语法简单,而且是可重复性生成的,比起 word 写文档,有更多的编程的特点。写书,写论文,写标书,写文档,都是不错的选择。

转载请注明出处:
http://blog.fens.me/r-markdown-rmarkdown/

打赏作者

Marked高效的Markdown解析器

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

关于作者

  • 张丹(Conan), 创业者,程序员(Java,R,Javascript)
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/nodejs-markdown-marked/

marked

前言

Markdown以一种轻巧简明的设计理念,赋予了Web文档新的活力,从而代替传统以Word为主导的电子文档。Markdown大量简化了HTML标签,被广大的互联网应用所使用。程序员所熟知的Github就完全基于Markdown语法,真的可以不再需要Word了。

Markdown不是HTML,目前还不能被浏览器解析,所以我们需要Markdown的解析器,把Markdown翻译成浏览器认识的HTML文档展示出来。Marked就是一个基于Nodejs的Markdown解析引擎!

目录

  1. markdown介绍
  2. marked安装
  3. marked命令行使用
  4. marked的API使用
  5. marked的个性化渲染

1. markdown介绍

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

Markdown 的目标是实现「易读易写」。

可读性,无论如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText,而最大灵感来源其实是纯文本电子邮件的格式。

Markdown的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多人用它写博客。世界上最流行的博客平台WordPress和大型CMS如joomla、drupal都能很好的支持Markdown,Github也是支持markdown的,在个性化语法上也做了不少的改进。Markdown的中文语法介绍:http://wowubuntu.com/markdown/

2款不错的markdown的在线编辑器:

如果你还没有开始用Markdown来写文档,那你一定OUT了。

2. marked安装

系统环境

  • Win7 64bit
  • Nodejs:v0.10.31
  • Npm:1.4.23

创建项目


~ cd D:\workspace\javascript>
~ D:\workspace\javascript>mkdir nodejs-marked && cd nodejs-marked

新建项目文件package.json


~ D:\workspace\javascript\nodejs-marked>notepad package.json
{
  "name": "marked-demo",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
  }
}

安装marked库,全局安装,同时在本地项目安装。


~ D:\workspace\javascript\nodejs-marked>npm install marked --save -g
C:\Users\Administrator\AppData\Roaming\npm\marked -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\marked\bin\
marked
marked@0.3.3 C:\Users\Administrator\AppData\Roaming\npm\node_modules\marked

通过-save参数,package.json文件中会自动增加marked库的依赖。


~ D:\workspace\javascript\nodejs-marked>cat package.json
{
  "name": "marked-demo",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "marked": "^0.3.3"
  }
}

通过-g参数,完成了marked库的全局安装,这时我们就可以直接在命令,使用marked的命令了。

查看命令行帮助,直接就报错误了,真是出师不利啊。


~ D:\workspace\javascript\nodejs-marked>marked -h
child_process: customFds option is deprecated, use stdio instead.
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: spawn man ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1046:32)
    at child_process.js:1137:20
    at process._tickCallback (node.js:355:11)
    at Function.Module.runMain (module.js:503:11)
    at startup (node.js:129:16)
    at node.js:814:3

定位错误,找到./node_modules/marked/bin/marked文件中help()函数,如下代码所示,这种写法不适用于Window系统,所以才出现-h报错的情况。庆幸的是,其他的功能命令参数都是正确的。


function help() {
  var spawn = require('child_process').spawn;

  var options = {
    cwd: process.cwd(),
    env: process.env,
    setsid: false,
    customFds: [0, 1, 2]
  };

  spawn('man',
    [__dirname + '/../man/marked.1'],
    options);
}

在Linux环境,我们看一下帮助命令。


~ marked -h

marked(1)                               marked.js                               marked(1)

NAME
       marked - a javascript markdown parser

SYNOPSIS
       marked  [-o  ]  [-i  <input>]  [--help]  [--tokens]  [--pedantic]  [--gfm]
       [--breaks]  [--tables]  [--sanitize]  [--smart-lists]   [--lang-prefix   <prefix>]
       [--no-etc...] [--silent] [filename]

DESCRIPTION
       marked  is  a  full-featured  javascript markdown parser, built for speed. It also
       includes multiple GFM features.

EXAMPLES
       cat in.md | marked > out.html
       echo "hello *world*" | marked
       marked -o out.html in.md --gfm
       marked --output="hello world.html" -i in.md --no-breaks

OPTIONS
       -o, --output [output]
              Specify file output. If none is specified, write to stdout.
       -i, --input [input]
              Specify file input, otherwise use last argument as input file. If no  input
              file is specified, read from stdin.
       -t, --tokens
              Output a token stream instead of html.
       --pedantic
              Conform  to  obscure  parts  of  markdown.pl as much as possible. Don't fix
              original markdown bugs.
       --gfm  Enable github flavored markdown.
       --breaks
              Enable GFM line breaks. Only works with the gfm option.
       --tables
              Enable GFM tables. Only works with the gfm option.
       --sanitize
              Sanitize output. Ignore any HTML input.
       --smart-lists
              Use smarter list behavior than the original markdown.
       --lang-prefix [prefix]
              Set the prefix for code block classes.
       --no-sanitize, -no-etc...
              The inverse of any of the marked options above.
       --silent
              Silence error output.
       -h, --help
              Display help information.

CONFIGURATION
       For configuring and running programmatically.
       Example
           require('marked')('*foo*', { gfm: true });
BUGS
       Please report any bugs to https://github.com/chjj/marked.
LICENSE
       Copyright (c) 2011-2014, Christopher Jeffrey (MIT License).
SEE ALSO
       markdown(1), node.js(1)

3. marked命令行使用

参数说明:

  • -o, –output [output]: 指定输出文件,默认为当前控制台
  • -i, –input [input]: 指定输入文件或最后一个参数,默认为当前控制台输入
  • -t, –tokens: 输出token流代替HTML
  • –pedantic: 只解析符合markdown.pl定义的,不修正markdown的错误
  • –gfm: 启动Github样式的Markdown,请参考 https://help.github.com/articles/github-flavored-markdown/
  • –breaks: 支持Github换行符,必须打开gfm选项
  • –tables: 支持Github表格,必须打开gfm选项
  • –sanitize: 原始输出,忽略HTML标签
  • –smart-lists: 优化列表输出
  • –lang-prefix [prefix]: 设置前置样式
  • –no-etc: 选择的反正标识
  • –silent: 不输出错误信息
  • -h, –help: 帮助信息

下面我们就直接使用命令行来处理markdown的文件。

新建一个Markdown文件m1.md,其中包括了文字,代码,段落,列表,格式。


Marked Demo
======================

这是一个Marked库使用的例子。 http://blog.fens.me/nodejs-markdown-marked/

> A full-featured markdown parser and compiler, written in JavaScript. Built
> for speed.

[![NPM version](https://badge.fury.io/js/marked.png)][badge]

## Install

``` bash
npm install marked --save
```

## 列表测试

+ 列表测试,行1
+ 列表测试,行2
+ 列表测试,行3
+ 列表测试,行4

## 表格测试

A | B | C
--|--|--
A1 | B1 | C1
A2 | B2 | C2
A3 | B3 | C3

使用命令行生成HTML。


D:\workspace\javascript\nodejs-marked>marked -i m1.md
<h1 id="marked-demo">Marked Demo</h1>
<p>这是一个Marked库使用的例子。 <a href="http://blog.fens.me/nodejs-markdown-marked/">http://blog.fens.me/nodejs-man-marked/</a></p>
<blockquote>
<p>A full-featured markdown parser and compiler, written in JavaScript. Built
for speed.</p>
</blockquote>
<p>[<img src="https://badge.fury.io/js/marked.png" alt="NPM version">][badge]</p<
<h2 id="install">Install</h2>
<pre><code class="lang-bash">npm install marked --save
</code></pre>
<h2 id="-">列表测试</h2>
<ul>
<li>列表测试,行1</li>
<li>列表测试,行2</li>
<li>列表测试,行3</li>
<li>列表测试,行4</li>
</ul>
<h2 id="-">表格测试</h2>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>

从代码上面看,所有的标签都被正确解析了。再把命令行的各种参数组合一下,看看是不是会有不一样的效果。

增加-o的参数,输出到指定文件中。


~ D:\workspace\javascript\nodejs-marked>marked -i m1.md -o m1_out.html

~ D:\workspace\javascript\nodejs-marked>ls m1*
m1.md  m1_out.html

增加-t的参数,以token形式输出。


~ D:\workspace\javascript\nodejs-marked>marked -t -i m1.md
[
  {
    "type": "heading",
    "depth": 1,
    "text": "Marked Demo"
  },
  {
    "type": "paragraph",
    "text": "这是一个Marked库使用的例子。"
  },
  {
    "type": "blockquote_start"
  },
  {
    "type": "paragraph",
    "text": "A full-featured markdown parser and compiler, written in JavaScript. Built\nfor speed."
  },

//省略输出
]

4. marked的API使用

接下来,我通过API来调用marked解析markdown文本。

新建一个脚本文件mark1.js


~ D:\workspace\javascript\nodejs-marked>notepad mark1.js

var marked = require('marked');
console.log(marked('I am using __markdown__.'));

运行脚本mark1.js。


~ D:\workspace\javascript\nodejs-marked>node mark1.js
<p>I am using <strong>markdown</strong>.</p>

下面再用API读取md1.md的文本,进行解析,然后输出为HTML,新建mark2.js文件。


var marked = require('marked')
    ,fs = require("fs")
    ,http = require('http');

marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: true,
    pedantic: false,
    sanitize: true,
    smartLists: true,
    smartypants: false
});

fs.readFile('m1.md', 'utf-8', function (err, data) {
    if (err) throw err;
    server(marked(data));
});

function server(html){
    http.createServer(function (req, res) {
        res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
        res.end(html);
    }).listen(1337, '127.0.0.1');
    console.log('Server running at http://127.0.0.1:1337/');
}

启动服务


~ D:\workspace\javascript\nodejs-marked>node mark2.js
Server running at http://127.0.0.1:1337/

打开浏览器,http://localhost:1337/,m1.md的markdown文本被正确解析为了HTML的网页,链接,文本,段落,表格,列表都被正确显示,我们只需要自定义好样式表就行了。

marked_1

5. marked的个性化渲染使用

接下来,我们引入bootstrap的样式,修饰一下页面。

修改mark2.js文件的代码。


fs.readFile('m1.md', 'utf-8', function (err, data) {

    //增加HTML的页头
    var header = '<!DOCTYPE html>'+
        '<html lang="zh-CN">'+
        '<head>'+
        '<title>Marked Demo</title>'+
        '<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">'+
        '</head><body>';

    //增加HTML的页底
    var footer = '<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>'+
        '<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>'+
        '</body></html>';

    if (err) throw err;
    server(header+marked(data)+footer);
});

渲染页面后,已经好看多了。

marked_2

但是,美中不足的是表格table,没有样式化。检查bootstrap的表格样式,需要在table的class属性增加table table-striped的样式。


<table class="table table-striped">
  ...
</table>

我们在试用marked渲染markdown的过程是自动完成的,现在我们要增加css就需要个性化的渲染,通过API改变渲染的过程。

在代码中增加table的处理,完整的代码如下所示。


var marked = require('marked')
    , fs = require("fs")
    ,http = require('http');

marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: true,
    pedantic: false,
    sanitize: true,
    smartLists: true,
    smartypants: false
});

//增加的代码,用于个性化输出table
var renderer = new marked.Renderer();
renderer.table = function (header, body) {
    return '<table class="table table-striped">'+header+body+'</table>'
}

fs.readFile('m1.md', 'utf-8', function (err, data) {
    var header = '<!DOCTYPE html>'+
        '<html lang="zh-CN">'+
        '<head>'+
        '<title>Marked Demo</title>'+
        '<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">'+
        '</head><body>';

    var footer = '<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>'+
        '<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>'+
        '</body></html>';

    if (err) throw err;
    var body = marked(data,{renderer: renderer});
    server(header+body+footer);
});

function server(html){
    http.createServer(function (req, res) {
        res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
        res.end(html);
    }).listen(1337, '127.0.0.1');
    console.log('Server running at http://127.0.0.1:1337/');
}

再次刷新网页,表格也被友好的显示了。
marked_3

这样,我们就完成了对markdown的文档的解析,也可以个性化地设计我们需要的处理样式了。最后,就是把marked库集成到应用中就可以了,其实真的很简单。

转载请注明出处:
http://blog.fens.me/nodejs-markdown-marked/

打赏作者

用WebStorm编辑Markdown

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

关于作者

  • 张丹(Conan), 程序员Java,R,PHP,Javascript
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/webstorm-markdown/

webstorm-markdown-title

前言

WebStorm是一个非常高效的开发工具,特别对于Web前端的开发。Markdown流行,因为其简化了HTML的语法,去掉了表单等复杂标签,以极简的语法只做网页展现。在WebStorem中编辑Markdown文档,是一种普遍的应用需求。

目录

  1. Markdown介绍
  2. 在WebStorem中安装Markdown插件
  3. 解决Markdown插件配置的问题

1. Markdown介绍

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)和亚伦·斯沃茨(Aaron Swartz)。它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。

Markdown的语法,对于没有编程经验的人,2-3个小时也可以掌握。各种语言基于的Markdown实现,都已经有了商业应用。

  • 高效,简约的设计,会让Markdown越走越远
  • 开源,免费的Liences,最后有可能会夺取微软Word软件的市场

本文不讲Markdown的语法,请大家自行查询。

Markdown的官方网站:http://daringfireball.net/projects/markdown/

2. 在WebStorem中安装Markdown插件

本来在WebStorem中安装Markdown插件很简单的事情,不知道是Idea的版本原因,还是Markdown插件设计者的原因,造成了一些使用问题,需要手动调整一些参数才正确使用。

我在这里也花了一些时间,找到了问题所在,因此写篇文章总结一下。

  • WebStorm版本:6.0.1
  • Makrdown插件版本:0.9.3

插件安装:

自动安装的截图:

webstorm-install

重起Webstorm软件,新建一个test.md文件。


APE: 测试Markdown语法
========================

Markdown语法

## INSTALL

#### 公共库安装
```{bash}
npm install
bower install
```

#### 私有库安装
```{bash}

```

## API

## demo

## License

private

我们看到,编辑器没有针对 markdown的文件进行适配,显示效果与文本文件无异。

markdown-txt

这就是问题所在!!

3. 解决Markdown插件配置的问题

经过排查发现,问题在于markdown插件没有和.md后缀的文件进行绑定!

查看文件类型的绑定:File –> Settings –> File Types –> Markdown files

markdown-files-old

增加*.md类型的绑定

markdown-files-add

然后,点击apply。

完成后,我们再打开之前编辑的test.md文件,Markdown的效果已经可以展示了。

markdown-show

底部标签text,preview可以在编辑和预览过程中切换效果,而且text也有语法高亮了。

如果想用Webstorm开发AngularJS,请参考文章:AngularJS最理想开发工具WebStorm

转载请注明出处:
http://blog.fens.me/webstorm-markdown/

打赏作者

30秒制作幻灯片 Cleaver

从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express,可以帮助我们迅速建立web站点,比起PHP的开发效率更高,而且学习曲线更低。非常适合小型网站,个性化网站,我们自己的Geek网站!!

关于作者

  • 张丹(Conan), 程序员Java,R,PHP,Javascript
  • weibo:@Conan_Z
  • blog: http://blog.fens.me
  • email: bsspirit@gmail.com

转载请注明出处:
http://blog.fens.me/nodejs-slide-cleaver/

nodejs-cleaver

前言

互联网时代,以浏览器作为入口,已经有越来越多的桌面应用被web应用所取代。微软最赚钱的Office办公软件,也正在被免费的web应用所吞噬。

Cleaver基于HTML5,用最短的时间做出超炫幻灯片。你还会坚持PowerPoint吗?

目录

  1. Cleaver介绍
  2. Cleaver安装
  3. Cleaver基本使用
  4. Cleaver配置选项option
  5. Cleaver的正文内容
  6. 用Cleaver制作一个幻灯片

1. Cleaver介绍

如果你已经有了一个Markdown的文档,30秒就可以制作成幻灯片。Cleaver是为Hacker准备的工具。

Cleaver的官方发布页:http://jdan.github.io/cleaver/

2. Cleaver安装

系统环境

  • Linux: Ubuntu 12.04 LTS 64bit
  • node: v0.6.12
  • npm: 1.1.4

通过nodejs安装Cleaver


~ cd /home/conan/nodejs
~ mkdir nodejs-cleaver && cd nodejs-cleaver
~ sudo npm install cleaver
cleaver@0.5.3 node_modules\cleaver
├── q@0.9.6
├── marked@0.2.10
├── highlight.js@7.3.0
├── mustache@0.7.0
├── optimist@0.3.5 (wordwrap@0.0.2)
└── js-yaml@2.1.0 (esprima@1.0.4, argparse@0.1.15)

全局安装Cleaver


~ sudo npm install cleaver -g

/usr/local/bin/cleaver -> /usr/local/lib/node_modules/cleaver/bin/cleaver
npm WARN package.json cookie-signature@1.0.1 No repository field.
npm WARN package.json methods@0.0.1 No repository field.
npm WARN package.json range-parser@0.0.4 No repository field.
npm WARN package.json dateformat@1.0.2-1.2.3 No repository field.
npm WARN package.json batch@0.4.0 No repository field.
npm WARN package.json ms@0.6.1 No repository field.
npm WARN package.json bytes@0.2.1 No repository field.
npm WARN package.json bytes@0.2.0 No repository field.
npm WARN package.json pause@0.0.1 No repository field.
npm WARN package.json uid2@0.0.2 No repository field.
npm WARN package.json eyes@0.1.8 No repository field.
npm WARN package.json policyfile@0.0.4 'repositories' (plural) Not supported.
npm WARN package.json Please pick one as the 'repository' field
npm WARN package.json assert-plus@0.1.2 No repository field.
npm WARN package.json ctype@0.5.2 No repository field.
npm WARN package.json eventemitter2@0.4.11 'repositories' (plural) Not supported.
npm WARN package.json Please pick one as the 'repository' field
npm WARN package.json cheerio-select@0.0.3 No repository field.
npm WARN package.json github-url-from-git@1.1.1 No repository field.
cleaver@0.5.3 /usr/local/lib/node_modules/cleaver
├── marked@0.2.10
├── q@0.9.6
├── highlight.js@7.3.0
├── mustache@0.7.0
├── optimist@0.3.5 (wordwrap@0.0.2)
└── js-yaml@2.1.0 (esprima@1.0.4, argparse@0.1.15)

注:cleaver不支持win系统

3. Cleaver基本使用

执行cleaver命令,解析一个markdown文件

用cleaver自带的例子


~ cleaver node_modules/cleaver/examples/basic.md

~ ls -l
-rw-rw-r-- 1 conan conan 12211 12月  4 15:39 basic.html
drwxr-xr-x 4 conan conan  4096 12月  4 15:37 node_modules

~ firefox basic.html

cleaver-firefox

查看文件:basic.md


~ vi node_modules/cleaver/examples/basic.md

title: Basic Example
author:
name: Jordan Scales
twitter: jdan
url: http://jordanscales.com
output: basic.html

--

# Cleaver 101
## A first look at quick HTML presentations

--

### A textual example

Content can be written in **Markdown!** New lines no longer need two angle brackets.

This will be in a separate paragraph.

<img src="http://whatismarkdown.com/workspace/img/logo.gif" alt="Drawing" style="width: 150px;"/>

![markdown-logo](logo.gif)
<img src="logo.gif" />

[Here's a link](http://google.com).

--

### A list of things

* Item 1
* Item B
* Item gamma

No need for multiple templates! [Another link](http://google.com).

--

### Unicode

* 林花謝了春紅 太匆匆
* 胭脂淚 留人醉 幾時重
* Matching Pairs «»‹› “”‘’「」〈〉《》〔〕
* Greek αβγδ εζηθ ικλμ νξοπ ρςτυ φχψω
* currency ¤ $ ¢ € ₠ £ ¥

--

### A code example

```javascript
// cool looking code
var func = function (arg1) {
return function (arg2) {
return "arg1: " + arg1 + "arg2: " + arg2;
};
};

console.log(func(1)(2)); // result is three
```

And here is some `inline code` to check out.

4. Cleaver配置选项option


title: Basic Example
author:
  name: Jordan Scales
  twitter: jdan
  url: http://jordanscales.com
output: basic.html

1). title: HTML的标题名

2). author: 作者信息,在最后一页显示

包括下面信息:

  • name: 名字
  • url: 个人网站
  • twitter: 微博
  • email: 邮件地址

3). theme: 皮肤(theme: jdan/cleaver-retro)

4). style: css样式表(style: css/main.css)

5). output: 生成的HTML文件名(output: basic.html)

6). controls: 控制按钮(controls: true)

7). progress: 顶部显示进程条(progress: true)

8). agenda: 生成一个目录页(progress: false)

9). encoding: 文档的字符编码(encoding: utf-8)

10). template: 设置每张slide的模板(template: template/slide.mustache)

11). layout: 设置HTML模板(template: template/layout.mustache)

5. Cleaver的正文内容

Cleaver仅支持Markdown语法的,通过Markdown构建网页内容,Markdown官方网站:http://daringfireball.net/projects/markdown/

需要注意的是,Cleaver以” — “(两个中横线)做为分页的标志,其他语法都遵循Markdown规则。

6. 用Cleaver制作一个幻灯片

新建文件: readme.md


~ vi readme.md

title: My Cleaver demo!
author:
    name: 张丹(DanZhang)
    twitter: Conan_Z
    url: http://blog.fens.me/nodejs-slide-cleaver/
output: cleaver.html
encoding: utf-8

--

# 前言

互联网时代,以浏览器作为入口,已经有越来越多的桌面应用被web应用所取代。微软最赚钱的Office办公软件,也正在被免费的w                                                                                   eb应用所吞噬。

Cleaver基于HTML5,用最短的时间做出超炫幻灯片。你还会坚持PowerPoint吗?

--

# 目录

1. Cleaver介绍
2. Cleaver安装
3. Cleaver基本使用
4. Cleaver配置选项option
5. 用Cleaver制作一个幻灯片

--

## 1. Cleaver介绍

30-second Slideshows for Hackers. http://jdan.github.io/cleaver/

--

## 2. Cleaver安装

```bash
~ cd /home/conan/nodejs
~ mkdir nodejs-cleaver && cd nodejs-cleaver
~ sudo npm install cleaver
cleaver@0.5.3 node_modules\cleaver
├── q@0.9.6
├── marked@0.2.10
├── highlight.js@7.3.0
├── mustache@0.7.0
├── optimist@0.3.5 (wordwrap@0.0.2)
└── js-yaml@2.1.0 (esprima@1.0.4, argparse@0.1.15)
```

--

## 3. Cleaver基本使用

执行cleaver命令,解析一个markdown文件

用cleaver自带的例子
```bash
~ cleaver node_modules/cleaver/examples/basic.md

~ ls -l
-rw-rw-r-- 1 conan conan 12211 12月  4 15:39 basic.html
drwxr-xr-x 4 conan conan  4096 12月  4 15:37 node_modules

~ firefox basic.html
```

![example](http://blog.fens.me/wp-content/uploads/2013/12/cleaver-firefox.png)

--

## 4. Cleaver配置选项option

--

## 5. 用Cleaver制作一个幻灯片

执行cleaver生成html

~ cleaver readme.md

在浏览器中预览

~ firefox cleaver.html

cleaver-ppt

MS Office PowerPoint 正在被远离。。。。

转载请注明出处:
http://blog.fens.me/nodejs-slide-cleaver/

打赏作者