标签 - markdown

markdown todo-list    2015-12-17 18:57:24    641    9    2

The Markdown Todo-List Synax is:

- [ ] Desktop v1.1 release
    - [x] Markdown editor add todo list
    - [x] Fix issue2
    - [ ] Fix issue3
- [ ] Leanote
    - [x] Fix issue4
    - [ ] Fix issue5

Preview:
title

leanote markdown blog    2015-04-12 00:32:42    918    6    9

很多朋友都反应为什么leanote笔记里的markdown预览效果和博客的效果不同, 这, 说来话长, 都怪life, 他没时间升级. 还好他昨天通宵把这个问题解决了. 以后别怪他了(当然有问题还是得怪他的).

新的解析器与笔记内的markdown解析器一样, 支持Latex公式, 流程图, Toc.

Leanote博客主题全部都升级, 可以通过重新安装主题使用该功能.

如果你自定义了主题, 那么通过简单的修改就可以快速升级, 方法:

编辑主题的post.html, 在相应代码修改成:

{{if $.post.IsMarkdown }}
<script src="http://leanote.com/public/libs/md2html/md2html.js"></script>
<script>
var content = $.trim($("#markdownContent textarea").val());
md2Html(content, $("#content"), function(html) {
    $("pre").addClass("prettyprint linenums");
    prettyPrint();
    initNav();
    weixin();
});
</script>
<!-- 不是markdown -->
{{else}}
<script>
$(function() {
	initNav();
	weixin();
});
</script>
{{end}}

核心代码为:

1. 首先加载 http://leanote.com/public/libs/md2html/md2html.js 

2. 然后调用 md2Html方法将markdown文本渲染到#content中.

<script src="http://leanote.com/public/libs/md2html/md2html.js"></script>
<script>
var content = $.trim($("#markdownContent textarea").val());
md2Html(content, $("#content"), function(html) {});
</script>

想要看效果? 这里有最全的markdown效果展示

markdown leanote    2015-04-12 00:04:01    4185    2    5

Markdown测试源码, 可以复制到Markdown编辑器下查看效果

# Welcome to Leanote! 欢迎来到Leanote!

## 1. 排版

**粗体** *斜体* 

~~这是一段错误的文本。~~

引用:

> 引用Leanote官方的话, 为什么要做Leanote, 原因是...

有充列表:
 1. 支持Vim
 2. 支持Emacs

无序列表:

 - 项目1
 - 项目2


## 2. 图片与链接

图片:
![leanote](http://leanote.com/images/logo/leanote_icon_blue.png)
链接:

[这是去往Leanote官方博客的链接](http://leanote.leanote.com)

## 3. 标题

以下是各级标题, 最多支持5级标题

```
# h1
## h2
### h3
#### h4
##### h4
###### h5
```

## 4. 代码

示例:

    function get(key) {
        return m[key];
    }
    
代码高亮示例:

``` javascript
/**
* nth element in the fibonacci series.
* @param n >= 0
* @return the nth element, >= 0.
*/
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.write(fib(10));
```

```python
class Employee:
   empCount = 0

   def __init__(self, name, salary):
        self.name = name
        self.salary = salary
        Employee.empCount += 1
```

# 5. Markdown 扩展

Markdown 扩展支持:

* 表格
* 定义型列表
* Html 
leanote markdown preview    2015-04-11 23:59:38    1532    2    4

Welcome to Leanote!

leantoe

h1

h2

h3

h4

h4
h5

MathJax 公式

×(f)=0(×F)=0(f)=2f×(×F)=(F)2F


v1.0-beta.3 ace markdown    2015-01-12 02:13:17    509    5    14

Leanote一直坚持着让知识编辑更简单的理念不断完善Leanote. 今天 Leanote v1.0-beta.3 发布了, 这一版对编辑器的功能做了极大的改进. 主要改进代码编辑器及使用全新Markdown编辑器, 和新增加第三方登录.

Leaonte坚信 轮子+轮子=产品,  我们庆幸身处一个开放的环境, 我们可以将一切好的东西吸收进来不断完美Leanote. 在这一版中, 我们没有自己开发代码编辑器, 而是集成了当今最好用的Ace代码编辑器. 在这新一版的Markdown编辑器中, 我们也是如此, 集成了当今最好用的stackedit编辑器.

1. 代码编辑器-Ace

这一新功能绝对是程序员朋友们的福利, 从此在笔记中贴代码将变得如此简单!!

1.1. 功能截图

1.1. 功能介绍

注意: 现在Leanote集成的代码编辑器仅支持基于webkit的浏览器, 如chrome, safari, 对于ie, firefox代码编辑器还是之前的编辑器. 请使用chrome体验该功能. 我们会尽快将该功能兼容到firefox, ie 10+上.

Ace支持的功能, 比如以下常用的功能都支持:

  • 代码高亮
  • 行号
  • tab 增加缩进
  • shift + tab 减少缩进
  • 折叠代码
  • 搜索代码
  • ....

1.2 插入代码

插入代码的方式有以下两种:

  • 使用工具栏的"代码语言"
  • 使用快捷键 ctrl + shift + c / command + shift + c

在使用时, 可以先选择一段文本(也可以不选择, 或将光标放在某行上), 使其转换为代码.

如:

1. 选择文本:

2. 使用ctrl + shift + c 或 使用工具栏的"代码语言" 选择"javascript", 就会转换成代码编辑器:



1.3 选择特定语言高亮

Ace会根据特定的语言进行代码高亮, 请在工具栏上"代码语言" 上选择正确的语言, 以确保Ace能正确的解析.

1.4 转换代码到html

将代码转换到普通的html, 先focus代码, 再使用工具栏的"代码语言"的"Convert Code".

->切换成:

1.5 切换Ace与pre

可以通过代码编辑器左上角的checkbox将Ace与<pre>相互切换. 支持这个功能是为了在一些情况下不使用Ace编辑器:

在Ace模式下, 左上角的checkbox是勾选的, 

点击就会切换到pre

当然再次勾选又会切换到Ace模