Atom

一款编辑器入门还是很简单的,学会怎么样创建,打开,编辑,保存文件就行。
剩下的就是慢慢熟悉,Atom 会不断带给你惊喜,如果你想简化或者加快平时工作中的某些任务或者动作,你就可以去搜索一下,Atom 要么本身就为你提供你需要的功能,没有的话,也可以通过现成的插件(Packages)或者自定义的方式解决。

安装

如果你顺着我们的路线走过来,你的电脑上应该已经安装好了系统的包管理工具,
Windows 上的 Chocolatey,Mac 上的 Homebrew,Atom 编辑器可以通过包管理工具来安装。

Windows

用管理员的身份打开 Powershell,然后用 choco install 去安装 Atom:

1
choco install atom

提示:Atom 编辑器体积挺大,在国内由于网络环境问题,在下载的时候会比较慢,
有时也可能出现不能连接到远程服务器的错误,解决的方法就是,准备 “梯子” 。

Mac

打开系统的 终端,然后用 Homebrew 的 brew install 命令去安装 Atom:

1
brew install Caskroom/cask/atom

在命令行下面安装完 Atom 以后,可以输入 atom ,后面指定一个目录,这样会用 Atom 编辑器打开这个目录。
另外 Atom 编辑器还自带了一个包管理工具叫 apm (Atom Package Manager),
用这个工具可以在命令行下面为编辑器去安装包 (Package) ,包就是 Atom 的插件。

Packages

Atom 核心的功能是由 Core Packages(核心包) 提供的,另外还有 Community Packages(社区包),
就是由社区成员自己开发并且分享出来的 Package。Atom 可以通过安装这些 Package 来扩展编辑器的功能。
安装 Package 可以在 Atom 的配置界面上去搜索,然后安装,也可以使用 apm 在命令行下面管理编辑器的 Package 。

Packages 列表:https://atom.io/packages

atom

安装包:通过配置界面

  • 打开 Atom 编辑器。
  • 打开 Atom 的配置界面(Windows:ctrl + , Mac:command + , )。
  • 点击边栏上的 Install(安装)。
  • 在界面上的 Install Packages 下面,选中 Packages 标签,然后搜索你想要安装的 Package。
  • 在搜索结果找到想要的 Package ,点击 Install 安装。

atom 编辑器

安装包:通过 apm

  • 打开命令行工具,Windows 用 Powershell,Mac 可以使用终端。
  • 搜索包用的是 apm search <关键词> 。
  • 找到想要的包以后,再用 apm install <包的名字>。

下面,你可以搜索一个叫 Localization 的包,然后安装一下,这个包会为 Atom 的菜单栏提供一个中文翻译。
下面我们再看一下怎么样去配置与管理包。

管理包

打开配置界面,在边栏上选中 Packages ,在这个界面上的 Communtity Packages 区域里,你可以找到自己安装的来自社区成员分享的包。
Core Packages 下面是 Atom 编辑器核心自带的包。

这里会显示包的名字,还有介绍,不想用的包,可以点击 Disable 按钮禁用它,或者直接点击 Uninstall 卸载掉包,点击 Settings 按钮可以打开包的配置界面,在这个界面上,你可以找到包的主页,说明的文档,可以查看包的源文件,还有相关的配置与快捷键。

下面打开之前安装的 Localization 这个包的配置界面,然后在 Settings 区域里面,在 Current Language 下面的文本框里输入:Chinese - Simplified ,这样会把菜单栏的语言设置成简体中文,如果设置成 Chinese - Traditional,会把菜单栏设置成繁体中文。输入以后,用鼠标点一下浏览器的其它的地方,这样编辑器会保存你的配置。

完成以后,想让设置生效,可以关掉并且重新打开编辑器,或者可以刷新一下编辑器。

刷新编辑器的快捷键:

1
2
Mac    :ctrl + alt + command + L
Windows:ctrl + alt + R

基础

编辑器没有使用的门槛,打开以后,你就已经知道怎么用了,不过有些小技巧可以了解一下,可以提高工作效率。
先去下载点东西,HTML5Boilerplate(https://html5boilerplate.com/),这个东西可以作为项目的基础,
以后我们会再跟它见面,以后在介绍前端包管理的时候,这个下载的动作可以用命令去做。
下载以后,解压一下,把解压以后的目录重命名成你自己想要创建的项目的名字,
然后用编辑器打开这个项目的目录(Mac:command + O,Windows:ctrl + shift + O)。

编辑器的工作区有两部分组成,左边是编辑器的 Tree View(树形视图),上面会显示你打开的目录里面的东西,
右边是编辑器,在这可以处理打开的文件,最上面是标签栏,点击不同的标签可以打开对应的文件。

树形视图

你想打开在树形视图上的文件,创建新的文件或者目录,展开与收起目录,这些动作可以用鼠标完成,或者也可以使用键盘上的按键。
想要在树形视图上操作,你需要把焦点放到树形视图上,切换焦点使用 ctrl + 0 。
你会发现树形视图上的背景颜色会有点变化,具体是什么变化,取决于你的编辑器使用的主题。

查看跟树形视图相关的命令,先确定你的焦点在树形视图上,然后打开命令面板(Command Palette),用快捷键:

1
2
Mac    :command + shift + P
Windows:ctrl + shift + P

搜索一下 tree view ,列出的就是跟树形视图相关的命令。

tree view

  • 向下移动:↓ 或 J
  • 向上移动:↑ 或 K
  • 展开目录:→ 或 L
  • 收起目录:← 或 H
  • 打开文件:enter 回车

多试几次上面的快捷键,把它变成自己的肌肉记忆。

编辑器

先随便打开几个项目里的文件,比如 humans.txt,index.html,还有 css/main.css 。
打开的文件会出现在编辑器的标签栏上,除了用鼠标点击标签可以打开对应的文件,也可以使用快捷键:

打开下一个标签面板

1
2
Mac    :alt + command + →
Windows:ctrl + pagedown

打开上一个标签面板

1
2
Mac    :alt + command + ←
Windows:ctrl + pageup

在 Mac 上,你还可以使用 command + 数字 ,打开对应的标签面板。

关闭标签面板

1
2
Mac    :command + W
Windows:ctrl + W

分离面板

在编辑器上打开的文件可以分离到不同的面板上显示,你可以把编辑器分隔成上,下,左,右,四个部分。
方法是,找到要分离显示的标签面板,鼠标右键点击,然后选择 Split Up,Split Down,Split Left 或者 Split Right。

这些动作也都有对应的快捷键,可以打开命令面板(Mac:command + shift + P,Windows:ctrl + shift + P),
然后搜索 Pane ,这样会显示出面板相关的操作命令。

分离到上面

1
2
Mac    :command + K
Windows:ctrl + K

分离到下面

1
2
Mac    :command + K
Windows:ctrl + K

分离到左面

1
2
Mac    :command + K
Windows:ctrl + K

分离到右面

1
2
Mac    :command + K
Windows:ctrl + K

注意上面这些快捷键的用法,是先按一下 command + K 或者 ctrl + K ,然后松开按键,再按一下上,下,左,右这些箭头按键。

查找文件

项目里的文件多了,想找到对应的文件,用鼠标点出这个文件很费事,可以用搜索找到文件。

在已经打开的文件里找到你想要的文件:

1
2
Mac    :command + B
Windows:ctrl + B

在整个项目里找到你需要的文件:

1
2
Mac    :command + P
Windows:ctrl + P

查找文件里的内容

你可以搜索包含特定内容的文件,比如在当前打开的文件里搜索,或者也可以在整个项目里搜索,
找到以后,可以把搜索的内容替换成新的内容。

在当前打开的文件中搜索

1
2
Mac    :command + F
Windows:ctrl + F

我想知道有没有查找下一处或者上一处的快捷键,
打开命令面板(Mac:command + shift + P,Windows:ctrl + shift + P),搜索 find ,仔细阅读一下,
你会看到 Find Next , Find Previous 还有跟它们对应的快捷键。

查找下一个地方

1
2
Mac    :command + G
Windows:F3

查找上一个地方

1
2
Mac    :shift + command + G
Windows:shift + F3

在整个项目中搜索

1
2
Mac    :shift + command + F
Windows:shift + ctrl + F

下面,是我搜索了项目中的 header ,回车以后,会显示出找到的结果,
这个结果显示了包含搜索的内容的文件,还有出现这个内容的位置,点一下,会打开出现这个搜索内容的文件,并且会定位到对应的位置上。

整个项目

读后感

小伙伴们 辛苦了, 能读到这里,一定吐了吧 ,O(∩_∩)O哈哈~ , 写的我也快吐了, 排版的不是很好 见谅一下吧。

下面欣赏一下美图吧!

美图

欢迎使用马克飞象

@(示例笔记本)[马克飞象|帮助|Markdown]

马克飞象是一款专为印象笔记(Evernote)打造的Markdown编辑器,通过精心的设计与技术实现,配合印象笔记强大的存储和同步功能,带来前所未有的书写体验。特点概述:

  • 功能丰富 :支持高亮代码块、LaTeX 公式、流程图,本地图片以及附件上传,甚至截图粘贴,工作学习好帮手;
  • 得心应手 :简洁高效的编辑器,提供桌面客户端以及离线Chrome App,支持移动端 Web;
  • 深度整合 :支持选择笔记本和添加标签,支持从印象笔记跳转编辑,轻松管理。

[TOC]

Markdown简介

Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的HTML页面。 —— 维基百科

正如您在阅读的这份文档,它使用简单的符号标识不同的标题,将某些文字标记为粗体或者斜体,创建一个链接或一个脚注[^demo]。下面列举了几个高级功能,更多语法请按Ctrl + /查看帮助。

代码块

1
2
3
4
5
6
7
8
9
10
@requires_authorization
def somefunc(param1='', param2=0):
'''A docstring'''
if param1 > param2: # interesting
print 'Greater'
return (param2 - param1 + 1) or None
class SomeClass:
pass
>>> message = '''interpreter
... prompt'''

LaTeX 公式

可以创建行内公式,例如 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。或者块级公式:

$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

表格

Item Value Qty
Computer 1600 USD 5
Phone 12 USD 12
Pipe 1 USD 234

流程图

1
2
3
4
5
6
7
8
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?

st->op->cond
cond(yes)->e
cond(no)->op

以及时序图:

1
2
3
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

提示:想了解更多,请查看流程图语法以及时序图语法

复选框

使用 - [ ]- [x] 语法可以创建复选框,实现 todo-list 等功能。例如:

  • [x] 已完成事项
  • [ ] 待办事项1
  • [ ] 待办事项2

注意:目前支持尚不完全,在印象笔记中勾选复选框是无效、不能同步的,所以必须在马克飞象中修改 Markdown 原文才可生效。下个版本将会全面支持。

印象笔记相关

笔记本和标签

马克飞象增加了@(笔记本)[标签A|标签B]语法, 以选择笔记本和添加标签。 绑定账号后, 输入(自动会出现笔记本列表,请从中选择。

笔记标题

马克飞象会自动使用文档内出现的第一个标题作为笔记标题。例如本文,就是第一行的 欢迎使用马克飞象

快捷编辑

保存在印象笔记中的笔记,右上角会有一个红色的编辑按钮,点击后会回到马克飞象中打开并编辑该笔记。

注意:目前用户在印象笔记中单方面做的任何修改,马克飞象是无法自动感知和更新的。所以请务必回到马克飞象编辑。

数据同步

马克飞象通过将Markdown原文以隐藏内容保存在笔记中的精妙设计,实现了对Markdown的存储和再次编辑。既解决了其他产品只是单向导出HTML的单薄,又规避了服务端存储Markdown带来的隐私安全问题。这样,服务端仅作为对印象笔记 API调用和数据转换之用。

隐私声明:用户所有的笔记数据,均保存在印象笔记中。马克飞象不存储用户的任何笔记数据。

离线存储

马克飞象使用浏览器离线存储将内容实时保存在本地,不必担心网络断掉或浏览器崩溃。为了节省空间和避免冲突,已同步至印象笔记并且不再修改的笔记将删除部分本地缓存,不过依然可以随时通过文档管理打开。

注意:虽然浏览器存储大部分时候都比较可靠,但印象笔记作为专业云存储,更值得信赖。以防万一,请务必经常及时同步到印象笔记

编辑器相关

设置

右侧系统菜单(快捷键Ctrl + M)的设置中,提供了界面字体、字号、自定义CSS、vim/emacs 键盘模式等高级选项。

快捷键

帮助 Ctrl + /
同步文档 Ctrl + S
创建文档 Ctrl + Alt + N
最大化编辑器 Ctrl + Enter
预览文档 Ctrl + Alt + Enter
文档管理 Ctrl + O
系统菜单 Ctrl + M

加粗 Ctrl + B
插入图片 Ctrl + G
插入链接 Ctrl + L
提升标题 Ctrl + H

关于收费

马克飞象为新用户提供 10 天的试用期,试用期过后需要续费才能继续使用。未购买或者未及时续费,将不能同步新的笔记。之前保存过的笔记依然可以编辑。

反馈与建议


感谢阅读这份帮助文档。请点击右上角,绑定印象笔记账号,开启全新的记录与分享体验吧。

[^demo]: 这是一个示例脚注。请查阅 MultiMarkdown 文档 关于脚注的说明。 限制: 印象笔记的笔记内容使用 ENML 格式,基于 HTML,但是不支持某些标签和属性,例如id,这就导致脚注TOC无法正常点击。

写作

接下来,我们要在网站中建立第一篇文章,您可以直接从现有的示例文章「Hello World」改写,但我们更建议您学习 new 指令。

1
$ hexo new [layout] <title>

您可以在命令中指定文章的布局(layout),默认为 post
可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

布局(Layout)

Hexo 有三种默认布局:post、page 和 draft,它们分别对应不同的路径,
而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts

文件名称

Hexo 默认以标题做为文件名称,但您可编辑 new_post_name 参数来改变默认的文件名称,
举例来说,设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章。

草稿

刚刚提到了 Hexo 的一种特殊布局:draft,这种布局在建立时会被保存到 source/_drafts 文件夹,
您可通过 publish 命令将草稿移动到 source/_posts 文件夹,该命令的使用方式与 new 十分类似,
您也可在命令中指定 layout 来指定布局。

1
$ hexo publish [layout] <title>

草稿默认不会显示在页面中,您可在执行时加上 –draft 参数,或是把 render_drafts 参数设为 true 来预览草稿。

模版(Scaffold

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:

1
$ hexo new photo "My Gallery"

在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md,并根据其内容建立文章,以下是您可以在模版中使用的变量: