sublime小技巧: 写HTML设置快捷键直接在浏览器打开,快速画表格,Markdown

本文主要是介绍sublime小技巧: 写HTML设置快捷键直接在浏览器打开,快速画表格,Markdown,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【未完待续】

  • 设置快捷键直接在浏览器打开
  1. 快捷键 Ctrl+Shift+P(菜单栏Tools->Command Paletter)
  2. 输入 package control, 点击 install package
    Ctrl+Shift+P, 输入view发现安装view in brouser 成功
  3. 设置快捷键:菜单栏Preferences->Key Bindings-User),打开Default (Windows).sublime-keymap文件编辑,
    输入如下内容:
    [ { “keys”: [“ctrl+alt+f”], “command”: “open_in_browser” },]
  • 快速画表格:安装Emmet插件再按tab
  1. 确定Sublime已经安装了emmet插件
    Ctrl+Shift+P(菜单栏Tools->Command Paletter) --> 在输入框中输入 install ,并按enter键 --> 再输入emmet,按enter键 )
  2. 在body标签中输入: table>tbody>(tr>td*4)*3table>(tr>td*5)*6
  3. 按tab键
  • 自动添加浏览器前缀
    为了让CSS3样式兼容,需要将某些样式加上浏览器前缀
前缀浏览器
-ms-IE浏览器
-moz-Firefox
-o-opera
-webkit-chrome safari

(补充,PC端兼容HTML5的方法:在页面中引入以下js文件:<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

  1. 下载autoprefixer插件
  2. 打开sublime ,选择菜单 Preferences > Browse Packages 将下载的压缩包解压到这
  3. 设置快捷键 preferences/key Bindings-User
    { “keys”: [“ctrl+alt+x”], “command”: “autoprefixer” }
  4. 设置Preferences>package setting>AutoPrefixer>Setting-User
    {
    “browsers”: [“last 7 versions”],
    “cascade”: true,
    “remove”: true
    }
    last 7 versions:最新的浏览器的7个版本
    cascade:缩进美化属性值
    remove:是否去掉不必要的前缀
  • 安装Markdown Preview插件
  1. 还是通过Package Control安装,使用 ctrl + shift + P来打开命令窗口,输入并选择 Package Control: Install Package
  2. 在弹出的窗口里输入 Markdown Preview并按回车来完成安装
  3. 配置快捷键:通过 Preferences -> Key Bindings - User打开sublime的快捷键 alt + m 配置文件。添加如下内容
    { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }
  4. 支持代码高亮功能:通过在Preferences -> Package Settings -> Markdown Preview -> Settings-User用户设置文件中添加如下内容{ "enable_highlight": true}
  5. 可以打开Markdown Preview的安装目录,找到markdown.css和github.css文件。根据需要修改css文件,如将body { width: 45em; border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto; }宽度修改更大(80%)。
    注意:sublime安装目录的 Data\Installed Packages目录直接用系统里的压缩工具打开zip包找markdown.css和github.css,修改完成需要保存回压缩包。
  • 同样可以安装MarkdownEditing插件,常用快捷键
    一级标题 ctrl+1
    二级标题 ctrl+2
    三级标题 ctrl+3
    以此类推,直到六级标题
    插入参考式链接 ctrl+win+r
    选中相关文字,粗体Alt+B,斜体Alt+I
    引用,>键或者Tab键

这篇关于sublime小技巧: 写HTML设置快捷键直接在浏览器打开,快速画表格,Markdown的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/825864

相关文章

Feign Client超时时间设置不生效的解决方法

《FeignClient超时时间设置不生效的解决方法》这篇文章主要为大家详细介绍了FeignClient超时时间设置不生效的原因与解决方法,具有一定的的参考价值,希望对大家有一定的帮助... 在使用Feign Client时,可以通过两种方式来设置超时时间:1.针对整个Feign Client设置超时时间

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S