路由补全.betway体育app:gif,看见别人的代码的例

转自我自己的 blog:Sources 开发日记五

本文转自:

常用插件

1.Mithril Emmet(代码快速编写工具)

Emmet前身是zen-coding

A.快速编写HTML代码

betway体育app 1

初始化.gif

betway体育app 2

内容.gif

betway体育app 3

分组.gif

betway体育app 4

id/class.gif

betway体育app 5

嵌套.gif

B.快速生成CSS样式

betway体育app 6

css.gif

在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮。

好久没写 blog 了,上一篇距离现在居然有一个半月了,而上一篇关于 Sources 的开发日记竟然相隔快两个月了。得赶快把 v1.0 的最后两篇写完,然后全身心进入下一个版本的开发和记录。

 

Auto Close Tag

自动添加HTML / XML关闭标签(必备)

2.HTML Snippets

betway体育app 7

html提示.png

于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何漂亮,巴拉巴拉。

这一篇讲的部分应该是整个 App 最出彩的地方,展示代码,而且是带有语法高亮的展示。

Designer's Guide

Auto Rename Tag

自动重命名配对的HTML / XML标签(必备)

3.Debugger for Chrome

断点调试工具

开始了正式的捣鼓。

语法高亮的实现方案

如何给代码在 iOS 上进行语法着色显示,这是这个 app 开发前我能想到的最大的一个难题。我看过几篇关于利用 Core Text 来给文本中不同的部分来设置不同颜色的 blog,但是前提是要知道哪些部分是哪些类型。关键字,字符串,数字,自建类型,注释……要把这些东西从一个代码文件中分析出来,实现一个语法分析器,对于现在的我来说简直不可能。

于是在 Google 里搜索「code highlight」,找到了我的解决方案, Web 端给各种语言提供语法高亮,而且包含了多种主题。只需要在网页中使用这个网站提供的 js,并指定代码段的 class 就可以实现梦想中的语法高亮!

所以在 iOS 端如何实现也就确定了,web view。

betway体育app 8Syntax-highlighten Code

 

Beautify

格式化javascript,JSON,CSS,Sass,和HTML

4.Path Intellisense

自动路由补全

betway体育app 9

路由补全.gif

在捣鼓之前去别的网站看了看。这里贴上简书的效果:

加载代码

既然是 web view,就需要跟 HTML 打交道了。根据 Github API 下载得到的代码是 plain text,想要语法高亮就要按照 highlightjs 的教程加载 js 到 HTML,所以要自定义一个 HTML 模板用来加载 js 和 代码。

<!DOCTYPE html><html lang="en"><head> <title>#title#</title> <link rel="stylesheet" href="#theme#.css"> <meta name='viewport' content='initial-scale=1.0; maximum-scale=2.0;'> <script src="highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script></head><body><pre><code >#code#</code></pre></body></html>

以上代码中的 #title #theme #code 都是 placeholder,在获取代码后用文件名、选择的主题和代码文本来替换。

CodeViewController 中下载代码之前需要获得这个模板的字符串:

private func htmlTemplateString() -> String? { let path = NSBundle.mainBundle().URLForResource("template", withExtension: "html")! let str: String? do { str = try String(contentsOfURL: path) } catch { str = nil } return str}

我用的是 WKWebView。因为 WKWebView 目前还无法在 Storyboard 中使用,所以只能在 code 中进行设置。

override func viewDidLoad() { super.viewDidLoad() navigationItem.title = file.name let config = WKWebViewConfiguration() config.preferences.javaScriptEnabled = true webView = WKWebView(frame: view.bounds, configuration: config) view.insertSubview(webView, belowSubview: favoriteButton) self.theme = NSUserDefaults.standardUserDefaults().stringForKey("default_theme") ?? "default" downloadSourceCode()}{% endcodeblock%}语法高亮的主题默认是 default,如果用户有选择其它主题就会存入 User Defaults 中,这样 `CodeViewController` 在每次加载后都会设置为上一次选择的主题。下载代码的逻辑是这样的:1. 先获取 HTML 模板和下载API2. 根据 API 去下载代码3. 如果 API 对应的文件是代码文件就将代码字符串进行转义、placeholder 替换,用 web view 加载4. 如果不是代码文件,就提示用户,并直接返回文件列表{% codeblock Download Code lang:swift %}private func downloadSourceCode() { if let template = htmlTemplateString(), downloadURLString = file.downloadURLString { let url = NSURL(string: downloadURLString)! EZLoadingActivity.show("loading source", disableUI: true) Alamofire.request(.GET, url) .responseData(completionHandler: {  in EZLoadingActivity.hide() self.setFavoriteButton() if let htmlData = response.data { if let dataString = String(data: htmlData, encoding: NSUTF8StringEncoding) { let escapeString = dataString.stringByReplacingOccurrencesOfString("<", withString: "<") .stringByReplacingOccurrencesOfString(">", withString: ">") self.contentString = escapeString let htmlString = template.stringByReplacingOccurrencesOfString("#code#", withString: escapeString) .stringByReplacingOccurrencesOfString("#title#", withString: self.file.name ?? "") .stringByReplacingOccurrencesOfString("#theme#", withString: self.theme) dispatch_async(dispatch_get_main_queue(), { self.webView.loadHTMLString(htmlString, baseURL: NSBundle.mainBundle().bundleURL) }) } else { // not a text file, show alert and then pop back let alertController = UIAlertController(title: "", message: "This file is not a source code file", preferredStyle: .Alert) let alertAction = UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler: {  in self.navigationController?.popViewControllerAnimated alertController.addAction(alertAction) RecentsManager.sharedManager.recents.removeFirst() self.presentViewController(alertController, animated: true, completion: nil) } } }) }}

Contents

  1. Overview  概述
  2. Installing / Applying theme in nopCommerce  安装保存主题
  3. Creating / Writing your own theme (using current / default theme)  开发自己的主题文件(使用已有的或默认的皮肤主题)。
  4. Understanding Layout / Design 了解、设计布局
  5. Customizing nopCommerce Themes 商城主题客户化订制。
  6. Widgets 工具插件
  7. Tips and Tricks 要诀技巧
  8. Contributing a Theme 主题贡献捐赠。

Bootstrap 4 & Font awesome snippets

包含Bootstrap 4&Font awesome 的代码片段

5.beautify

格式化代码的工具

betway体育app 10

语法高亮主题列表

其它的代码查看 App 关于语法高亮主题的选择上都只是列出个名称列表而已,通过名称并不能直观的知道该主题是个什么样子的,必须设置后才能一窥究竟。我在这部分做了一点微小的工作:将主题的整体配色加入到列表中。

betway体育app 11Theme list

用户点击一个 theme 后,会返回到 CodeViewController 并重新加载上面的 HTML string,具体代码就不贴了,可以到我的 github 中查看。弄这个 list 纯是个手工活,因为这个 list 并不是动态加载的,而是我将各个主题的配色都手工提取出来做成了一个数组:

betway体育app 12Theme array

要问我为什么要手工搞这个数组,下面就是原因。

highlightjs 中每一个 theme 其实是一个 css,就是定义了 HTML 中各个 class 的颜色,以 default 为例:

....hljs { display: block; overflow-x: auto; padding: 0.5em; background: #F0F0F0;}/* Base color: saturation 0; */.hljs,.hljs-subst { color: #444;}.hljs-comment { color: #888888;}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name { font-weight: bold;}/* User color: hue: 0 */.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion { color: #880000;}.hljs-title,.hljs-section { color: #880000; font-weight: bold;}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo { color: #BC6060;}/* Language color: hue: 90; */.hljs-literal { color: #78A960;}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition { color: #397300;}...

每一个 css 中的 class 都不尽一样,不过大部分还都是定义了四五个颜色,分别对应背景、关键字、自定义类型、字符串、数字和注释等等。因为 css 没有一个统一的格式标准,所以想靠动态读取来获得这些颜色还是要比搞个固定的数组麻烦许多,毕竟这个数组也不是太大,才70多个元素。

Overview概述:

Bracket Pair Colorizer

颜色识别匹配括号

6.vscode-fileheader

快捷键:ctrl+alt+i
顶部注释,可定义作者、时间等信息,保存文件时自动更新最后修改时间。

其中的关键字,方法名,字符串都有不同的颜色,虽然这个代码高亮得不是很好看,但还过得去。于是去看了看document,发现是这样的:

What is a theme?什么是主题

A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.

Themes are made up of a set of elements: skins, cascading style sheets (CSS), images, and other resources. At a minimum, a theme will contain skins. Themes are defined in special directories in your Web site or on your Web server.

A theme can also include a cascading style sheet (.CSS file). When you put a .CSS file in the theme folder, the style sheet is applied automatically as part of the theme. You define a style sheet using the file name extension .CSS in the theme folder. (Source: )

Class autocomplete for HTML

智能提示HTML class =“”属性(必备)

7.Vue 2 Snippets

vue2 高亮 补全

<pre class="hljs javascript"><code class="javascript">function getPersonInfo(name,age,sex) {
  console.log(name+age+sex);
}
//要是我这样传,name就成了18,age成了王二了。
getPersonInfo('18','王二','男');
//所以可以这样写
function getPersonInfo(args){
  console.log(args.name+args.age+args.sex);
}
getPersonInfo({name:'王二',age'18',sex:'男'});</code></pre>

Definition of a nopCommerce theme 系统已有的主题

A nopCommerce theme is basically used for having a consistent layout and appearance across all pages or an entire website. nopCommerce theme consists of several supporting files, including style sheets for page appearance and supporting images.

betway体育app 13

The file structure of a nopCommerce theme is as follows:

Code Runner

非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角出现:

点击这个按钮就可以运行你的文件了(必备)

8.Atom One Dark Theme

喜欢atom主题的可以下载,安装过后,设置一下

betway体育app 14

设置.png

hljs??绝对就是这货了。于是找到了我们的主角:highlight.js。

Location of theme(s) in nopCommerce

In your nopCommerce root folder/Themes/... HERE you will see the list of all themes installed.

See figure below:

betway体育app 15

css peek

能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义(必备)

使用方法:将光标放在class里面的属性,右击

9.vscode-icon

图标样式,必备插件
安装后,ctrl+shift+p调出命令行,输入theme,选择vscode-icon

betway体育app 16

theme.png

betway体育app 17

icon.png

highlight.js官网

Installing / Applying theme in nopCommerce安装保存主题

Let's assume you just downloaded a new theme which is in a zip file.

  1. Now, extract the contents of your zip file and copy it under "Themes" folder like shown in the figure below:

    现在,提取压缩文件内容复制到主题文件夹内如下图示:

    (Make sure all the files/folders inside the Your_Theme_Name folder are in proper order – You can match it with the first figure above)

    确保所有的文件和文件夹都在新建的主题文件夹内,可以和已有的主题文件对比下。

    betway体育app 18

  2. Now login to your website using admin credentials:

    现在用管理员身份登录到你的网站

    betway体育app 19

  3. Go to the admin section (www.yourdomain.com/admin):

    到后台管理区。

    betway体育app 20

  4. Go to Configuration > Settings > General And Miscellaneous settings

    到 配置 -》设定-》一般与杂项设定

    betway体育app 21

  5. Go to 1st tab "Store Information" > See 4th option: "Store theme" - Select new theme from dropdown and SAVE

    到第一个 表 “商城信息” 看第四个选项 商城主题 ,在下拉列表中选择新主题 并保存。

    betway体育app 22

    Now, go to public store > you should be able to see the new theme on your website. 现在可以去前台,可以看到新主题已经生效。

Dash

查文档必备,搭配 dash(不过似乎只有 mac 版)

本文由必威发布于必威-编程,转载请注明出处:路由补全.betway体育app:gif,看见别人的代码的例

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。