l1n6yun's Blog

记录学习的技能和遇到的问题

0%

Highlight.js

Build Status

Highlight.js is a syntax highlighter written in JavaScript. It works in
the browser as well as on the server. It works with pretty much any
markup, doesn’t depend on any framework and has automatic language
detection.

Getting Started

The bare minimum for using highlight.js on a web page is linking to the
library along with one of the styles and calling
initHighlightingOnLoad:

1
2
3
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

This will find and highlight code inside of <pre><code> tags; it tries
to detect the language automatically. If automatic detection doesn’t
work for you, you can specify the language in the class attribute:

1
<pre><code class="html">...</code></pre>

The list of supported language classes is available in the class
reference
. Classes can also be prefixed with either language- or
lang-.

To disable highlighting altogether use the nohighlight class:

1
<pre><code class="nohighlight">...</code></pre>

Custom Initialization

When you need a bit more control over the initialization of
highlight.js, you can use the highlightBlock and configure
functions. This allows you to control what to highlight and when.

Here’s an equivalent way to calling initHighlightingOnLoad using
jQuery:

1
2
3
4
5
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});

You can use any tags instead of <pre><code> to mark up your code. If
you don’t use a container that preserve line breaks you will need to
configure highlight.js to use the <br> tag:

1
2
3
4
5
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});

For other options refer to the documentation for configure.

Web Workers

You can run highlighting inside a web worker to avoid freezing the browser
window while dealing with very big chunks of code.

In your main script:

1
2
3
4
5
6
addEventListener('load', function() {
var code = document.querySelector('#code');
var worker = new Worker('worker.js');
worker.onmessage = function(event) { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
})

In worker.js:

1
2
3
4
5
onmessage = function(event) {
importScripts('<path>/highlight.pack.js');
var result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
}

Getting the Library

You can get highlight.js as a hosted, or custom-build, browser script or
as a server module. Right out of the box the browser script supports
both AMD and CommonJS, so if you wish you can use RequireJS or
Browserify without having to build from source. The server module also
works perfectly fine with Browserify, but there is the option to use a
build specific to browsers rather than something meant for a server.
Head over to the download page for all the options.

Don’t link to GitHub directly. The library is not supposed to work straight
from the source, it requires building. If none of the pre-packaged options
work for you refer to the building documentation.

The CDN-hosted package doesn’t have all the languages. Otherwise it’d be
too big. If you don’t see the language you need in the “Common” section,
it can be added manually:

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

On Almond. You need to use the optimizer to give the module a name. For
example:

1
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

License

Highlight.js is released under the BSD License. See LICENSE file
for details.

The official site for the library is at https://highlightjs.org/.

Further in-depth documentation for the API and other topics is at
http://highlightjs.readthedocs.io/.

Authors and contributors are listed in the AUTHORS.en.txt file.

css

1
2
3
4
div.icon{height:20px;width:20px;overflow: hidden;}
.icon .icon{width: 20px;height: 20px;display:block;position: relative;left: -20px;border-right: 20px solid transparent;
background: url(img/icon.png) no-repeat;-webkit-filter: drop-shadow(#000 20px 0);filter: drop-shadow(#000 20px 0);
}

html

1
2
3
4
<div class="icon">
<span class='icon' id='icon'></span>
</div>
<input type="color" id='color' />

JS

1
2
3
4
document.getElementById('color').onchange = function(){
var c = this.value;
document.getElementById('icon').style.webkitFilter = 'drop-shadow('+c+' 20px 0)';
}

在谷歌、火狐手机端、都是可以用的,使用的技术是 css 里滤镜里的投影。

我要睡到下一个世界大战

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{margin: 0px; padding: 0px;}
html,body{width: 100%; height: 100%;overflow: hidden;}

.section-wrap{width: 100%; height: 100%; overflow: visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{width: 100%; height: 100%;}

.section-1{background: #0f0}
.section-2{background: #FF0}

.put-section-1{ transform:translateY(0);-webkit-transform:translateY(0);}
.put-section-2{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}

.section-btn{ width:14px;position:fixed;right:4%;top:50%;}
.section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center; color:#fff; onsor:pointer;}
.section-btn li.on{ background:#fff}
</style>

<body>
<section class='section-wrap put-section-1'>
<div class="section section-1">
<div class='title'>
<p class="tit">111</p>
</div>
</div>
<div class="section section-2">
<div class='title'>
<p class="tit">222</p>
</div>
</div>
</section>
<ul class="section-btn">
<li class="on"></li>
<li></li>
</ul>

<script type="text/javascript" src='jiaoben3135/js/jquery.min.js'></script>
<script type="text/javascript">

$(function(){
var i=1;
var $btn = $('.section-btn li'),
$wrap = $('.section-wrap'),
$arrow = $('.arrow');

/*当前页面赋值*/
function up(){i++;if(i>$btn.length){i=1};}
function down(){i--;if(i<1){i=$btn.length};}

// /*页面滑动*/
function run(){
$btn.eq(i-1).addClass('on').siblings().removeClass('on');
$wrap.attr("class","section-wrap").addClass(function() { return "put-section-"+i; }).find('.section').eq(i).find('.title').addClass('active');
};

// /*右侧按钮点击*/
$btn.each(function(index) {
$(this).click(function(){
i=index+1;
run();
})
});

// /*翻页按钮点击*/
$arrow.one('click',go);
function go(){
up();run();
setTimeout(function(){$arrow.one('click',go)},1000)
};

// /*响应鼠标*/
$wrap.one('mousewheel',mouse_);
function mouse_(event){
if(event.deltaY<0) {up()}
else{down()}
run();
setTimeout(function(){$wrap.one('mousewheel',mouse_)},1000)
};

// /*响应键盘上下键*/
$(document).one('keydown',k);
function k(event){
var e=event||window.event;
var key=e.keyCode||e.which||e.charCode;
switch(key) {
case 38: down();run();
break;
case 40: up();run();
break;
};
setTimeout(function(){$(document).one('keydown',k)},1000);
}
});
</script>
</body>
</html>

配置:

1
2
'DB_TYPE' => 'sqlite',
'DB_NAME' => DATA_PATH.'/test.db',

文件:\Library\Think\Db\Driver\Sqlite.class.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
namespace Think\Db\Driver;

use Think\Db\Driver;

/**
* Sqlite数据库驱动
*/
class Sqlite extends Driver
{

/**
* 解析pdo连接的dsn信息
* @access public
* @param array $config 连接信息
* @return string
*/
protected function parseDsn($config)
{
$dsn = 'sqlite:' . $config['database'];
return $dsn;
}

/**
* 取得数据表的字段信息
* @access public
* @return array
*/
public function getFields($tableName)
{
list($tableName) = explode(' ', $tableName);
$result = $this->query('PRAGMA table_info( ' . $tableName . ' )');
$info = array();
if ($result) {
foreach ($result as $key => $val) {
$info[$val['name']] = array(
'name' => $val['name'],
'type' => $val['type'],
'notnull' => (bool) (1 === $val['notnull']),
'default' => $val['dflt_value'],
'primary' => '1' == $val['pk'],
'autoinc' => false,
);
}
}
return $info;
}

/**
* 取得数据库的表信息
* @access public
* @return array
*/
public function getTables($dbName = '')
{
$result = $this->query("SELECT name FROM sqlite_master WHERE type='table' "
. "UNION ALL SELECT name FROM sqlite_temp_master "
. "WHERE type='table' ORDER BY name");
$info = array();
foreach ($result as $key => $val) {
$info[$key] = current($val);
}
return $info;
}

/**
* SQL指令安全过滤
* @access public
* @param string $str SQL指令
* @return string
*/
public function escapeString($str)
{
return str_ireplace("'", "''", $str);
}

/**
* limit
* @access public
* @return string
*/
public function parseLimit($limit)
{
$limitStr = '';
if (!empty($limit)) {
$limit = explode(',', $limit);
if (count($limit) > 1) {
$limitStr .= ' LIMIT ' . $limit[1] . ' OFFSET ' . $limit[0] . ' ';
} else {
$limitStr .= ' LIMIT ' . $limit[0] . ' ';
}
}
return $limitStr;
}

/**
* 随机排序
* @access protected
* @return string
*/
protected function parseRand()
{
return 'RANDOM()';
}
}

先来看下面写好的批处理代码,有木有眼花缭乱的感觉,不要害怕哦,其实核心代码只有一行而已!准确的说应该是将一些最基本的DOS命令组合在了一起。

1
2
3
4
5
6
@echo off
color e
title 批处理扫网段主机
echo.
@for /f "tokens=1-4 delims=." %%i in (ip.txt) do (@for /l %%n in (1,1,255) do @ping -w 600 -n 1 -l 1 %%i.%%j.%%k.%%n|find /i "ttl")
echo.&echo 扫描完毕,按任意键退出...&pause>nul

复制以上代码粘贴到记事本文档里,然后另存为 批量ping.bat ,再新建一个空白的文本文档,重命名为 ip.txt 。一切准备完事儿,就可以将你要批量扫描的ip段的地址放入 ip.txt 里(比如要扫自己对应的内网IP段就可以在 ip.txt 里输入 192.168.0.1 后保存),然后双击一键运行 批量ping.bat 批处理脚本就可以看到返回的结果了。格式类似于:

1
2
3
4
5
6
7
来自 192.168.0.1 的回复: 字节=1 时间<1ms TTL=64
来自 192.168.0.101 的回复: 字节=1 时间=31ms TTL=64
来自 192.168.0.103 的回复: 字节=1 时间=326ms TTL=64
来自 192.168.0.104 的回复: 字节=1 时间=26ms TTL=64
来自 192.168.0.108 的回复: 字节=1 时间<1ms TTL=64
来自 192.168.0.162 的回复: 字节=1 时间<1ms TTL=128
……此处省略余下的所有可能的结果……

下面我就来解读一下介个看起来有点儿吃力的批处理命令吧。我们分拆来看一下,ping -w 600 -n 1 -l 1 表示对指定ip地址ping一次,等待超时的时间为600毫秒;|find /i "ttl" 指的是仅显示ping返回结果中带“ttl”字符串的结果,也就是将指定网段内不存活的主机过滤掉了。而前面的 @for /f "tokens=1-4 delims=." %%i in (ip.txt) 意思是将“ip.txt”里的字符串(也就是我们要查找的ip段的地址)以“.”为界分割为四部分,分别赋予后面的变量 %%i、%%j、%%k 。最后剩下的 @for /l %%n in (1,1,255) 则表示从1开始循环+1递增一直到255停止,然后赋予变量 %%n 。不知道这样说同学能否看懂呢?看不懂滴可以在cmd窗口里输入 for /? 查看一下命令详解吧。

  1. 将一下代码保存为浏览器书签
    1
    javascript:document.cookie=window.prompt("Linx Edit cookie:",document.cookie);void(0);
  2. 打开需要查询或编辑的网站
  3. 点击书签即可对Cookie进行操作

Linx 是作者的名称

基于之前的文章方法,加入批处理命令即可实现自动备份。只是由于批处理命令中对于备份文件的名字按照时间命名比较特别,所以特别整理一文。

复制date文件夹备份

假想环境:
MySQL 安装位置:C:\MySQL
论坛数据库名称为:bbs
数据库备份目的地:C:\db_bak\

新建db_bak.bat,写入以下代码

1
2
3
net stop mysql
xcopy c:\mysql\data\bbs\*.* c:\db_bak\bbs\%date:~0,10%\ /S /I
net start mysql

然后使用Windows的“计划任务”定时执行该批处理脚本即可。(例如:每天凌晨3点执行back_db.bat)

解释:备份和恢复的操作都比较简单,完整性比较高,控制备份周期比较灵活,例如,用%date:0,10%。此方法适合有独立主机但对mysql没有管理经验的用户。缺点是占用空间比较多,备份期间mysql会短时间断开(例如:针对30M左右的数据库耗时5s左右),针对%date:0,10%的用法参考 。

mysqldump备份成sql文件

假想环境:

MySQL 安装位置:C:\MySQL
论坛数据库名称为:bbs
MySQL root 密码:123456
数据库备份目的地:D:\db_backup\

脚本:

1
2
3
4
@echo off
set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%"
C:\MySQL\bin\mysqldump --opt -u root --password=123456 bbs > D:\db_backup\bbs_%Ymd%.sql
@echo on

将以上代码保存为backup_db.bat

然后使用Windows的“计划任务”定时执行该脚本即可。(例如:每天凌晨5点执行back_db.bat)

说明:此方法可以不用关闭数据库,并且可以按每一天的时间来名称备份文件。

通过%date:5,2%来组合得出当前日期,组合的效果为yyyymmdd,date命令得到的日期格式默认为yyyy-mm-dd(**如果不是此格式可以通过pause命令来暂停命令行窗口看通过%date:,20%得到的当前计算机日期格式**),所以通过%date:5,2%即可得到日期中的第五个字符开始的两个字符,例如今天为2009-02-05,通过%date:5,2%则可以得到02。(日期的字符串的下标是从0开始的)

利用WinRAR对MySQL数据库进行定时备份。

对于MySQL的备份,最好的方法就是直接备份MySQL数据库的Data目录。下面提供了一个利用WinRAR来对Data目录进行定时备份的方法。

首先当然要把WinRAR安装到计算机上。

将下面的命令写入到一个文本文件里

1
2
3
net stop mysql
c:\progra~1\winrar\winrar a -ag -k -r -s d:\mysql.rar d:\mysql\data
net start mysql

保存,然后将文本文件的扩展名修改成CMD。进入控制面版,打开计划任务,双击“添加计划任务”。在计划任务向导中找到刚才的CMD文件,接着为这个任务指定一个运行时间和运行时使用的账号密码就可以了。

这种方法缺点是占用时间比较多,备份期间压缩需要时间,mysql断开比第一种方法更多的时间,但是对于文件命名很好。

一些代码保存为 清除桌面快捷方式小箭头.reg 文件运行后,重启 explorer.exe 进程

1
2
3
4
5
Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons]
"29"=""