前端工程师常使用的编辑器/IDE

  • 本地在线工具

    webstrom 推荐指数 *****

    vs code 推荐指数 ****

    atom 推荐指数 ****

    subline-text 推荐指数 ****

  • 电脑系统的工具

    各自系统自带的文本编辑器,例如windo的记事本 推荐指数 **

    或者Notep++ 推荐指数 ***

    又或者vim 等等 推荐指数 ****

  • 网络在线编辑平台

    Codepen.io

    JSBin

    JSFiddle

    CodeAnywhere

    Koding

几款常用的Markdown编辑器

面向前端开发者:

  • Typor 官网 推荐指数*****

  • MarkdownPad2 官网 推荐指数*****

  • Atom 官网 推荐指数***

  • Vs code 官网 推荐指数***

按用户场景分:

  • Markdown编辑器后,将它们归纳为三类

    1. 文库集成类:与在线文库相集成,代表有Modoko、GibBook、简书
    2. 独立软件类:独立产品,编辑本地文件,代表有MarkdownEditor、Typor、Haroopad等
    3. 编辑器插件类:在主流编辑器上扩展插件,代表有WebStorm、Atom、Sublime Text。
  • 这三类软件分别面向三类Markdown用户。

    1. 重量型用户,即文字工作者,他们需要撰写大量的文章,甚至是写一本树书,对文档的组织有明确要求。
    2. 轻量型用户,典型的是博客写手,他们要写中等长度的文章,文章的保存和发表交给博客网站。
    3. 偶然用户,通常是开发者,他们需要为程序撰写说明文档,例如readme.md

可以说是有了不同的用户需求,催生了不同类别的工具。当我们要选择Markdown编辑器时,我们应当先定位自己的需求,然后考察哪些工具可以满足自己的需求,最后从这里面选择佼佼者。

Markdown的语法

标题

一级标题 语法:# 一级标题(最大)

二级标题 语法:## 二级标题

三级标题 语法:### 三级标题

四级标题 语法:#### 四级标题

五级标题 语法:##### 五级标题

六级标题 语法:###### 六级标题(最小)

列表

有序列表

数字加点
语法:1. 有序列表 => 1.有序列表
2. 有序列表 => 2.有序列表
2. 有序列表 => 3.有序列表

无需列表

用 + 或者 - 或者 * 来表示
语法: + 无序列表 => .无序列表
* 无序列表 => .无序列表
- 无序列表 => .无序列表

列表嵌套

上一级和下一级之间敲三个空格即可

  • 一级无序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
  • 一级无序列表内容

    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容
  1. 一级有序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
  2. 一级有序列表内容

    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容

超链接

语法:[超链接名](超链接地址)
例如:[淘宝](https://www.taobao.com) => 显示:淘宝

引用

在文字前面加上">"这个字符,例如:  >我是引用
可以在文字前面加多个">", 例如加两个: >>我是二级引用

图片

语法:![图片alt](图片地址 ''图片title'')

代码

语法:
单行代码:代码之间分别用一个反引号包起来 例如: `console.log("单行代码")`
代码块:代码之间分别用三个反引号包起来,且两边的反引号单独占一行
例如:
```
function(){...}...
function(){...}...
function(){...}...
```

表格

语法:

学生|学号|性别
-|-|-|
张三|001|男|
李四|002|男|
李华|003|女|

显示如下:

学生 学号 性别
张三 001
李四 002
李华 003

又例如:

 name | 111 | 222 | 333 | 444
- | :-: | :-: | :-: | -:
aaa | bbb | ccc | ddd | eee|
fff | ggg| hhh | iii | 000|

显示如下:

name 111 222 333 444
aaa bbb ccc ddd eee
fff ggg hhh iii 000

Web前端 前端工程师首选的几款编辑器/IDE以及Markdown的编辑器、语法的更多相关文章

  1. 从就业面分析web前端开发工程师就业前景(2011.6)

    案例一 公司名称:法国电信北京研发中心 工作地点:北京 联系方式:hao.luan@orange-ftgroup.com 栾先生 岗位名称:web 前端开发工程师 岗位要求: 1. 计算机或相关专业本 ...

  2. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  3. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  4. Web前端开发工程师需要掌握哪些核心技能?

    Web前端开发所涉及的内容主要包括W3C标准中的结构.行为和表现,那么这三项中我们需要掌握的核心技能是什么呢? 1.开发语言 HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又 ...

  5. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  6. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  7. [web建站] 极客WEB大前端专家级开发工程师培训视频教程

    极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...

  8. 【转】Web前端研发工程师编程能力飞升之路

    分类: Javascript | 出自 海玉的博客 今天看到这篇文章.写的非常有意思.发现自己还有很长的一段路要走. [背景] 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧: 如 ...

  9. Web前端开发工程师基本要求

    一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错 ...

随机推荐

  1. Eclipse 4.2 安装Java反编译插件

    在eclipse下安装反编译插件可以直接查看 .class 文件对应的java源码. 反编译插件有 jdeclipse 和 jadeclipse. (1) jdeclipse http://www.d ...

  2. RabbitMQ (二)工作队列

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37620057 本系列教程主要来自于官网入门教程的翻译,然后自己进行了部分的修改与 ...

  3. cassandra 在window上的demo

    Cassandra   window使用 1.        下载:http://cassandra.apache.org/download/. 2.        解压后,bin目录下,cassan ...

  4. 电脑不识别U盘

    最近遇到这样一个问题,现把具体问题和解决方案给大家分享一下: 系统:win10 症状:插入U盘,系统提示插入U盘的声音提示,磁盘不显示,360 无图标 原因:USB驱动出现问题 对症下药: 插入U盘右 ...

  5. procotol.go 源码阅读

    )         return     }     bufferOver = buffer[i:]     return } //整形转换成字节 // func IntToBytes(n int) ...

  6. Clean http handlers in Go

    Introduction For this blog post we are going to take a look at the http.HandlerFunc type and how we ...

  7. 在MFC中UpdateData()的作用

    UpdateData()用来刷新数据,其中UpdateData(true)将控件中的数据传递到控件捆绑的变量中去.UpdateData(false)将变量值传递到控件中去.例如:窗口中用 DDX_Te ...

  8. bzoj 2820 莫比乌斯反演

    搞了一整个晚自习,只是看懂了dalao们的博客,目前感觉没有思路-.还是要多切题 next day: 刚才又推了一遍,发现顺过来了,hahaha #include<cstdio> #inc ...

  9. 如何改变XCode的默认设置

    改变bundle ID 进入 /Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Appl ...

  10. window.history.back(-1);与window.go(-1);的区别

    history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在 history.back(1) 前进 ...