selection 和 range

先放上MDN上的解释：selection， range

折叠功能好写，但是复制功能有些麻烦，最后查MDN解决了，简而言之，就是获取selection，创建一个range，把要复制的元素放到range里，再把range添加到selection里，由此获取要复制的文本，生成一个textarea并把文本填进去，用这个textarea执行select()，最后执行document.execCommand('copy')

如果对您有所帮助的话，请点下推荐，谢谢

css

两套代码高亮方案

• 当前我使用的

/*

JSFiddle Light (c) Oskar Krawczyk <oskar@jsfiddle.net>

*/
.hljs-comment,
.hljs-quote {
  color: #abb8c6;
}

.hljs-variable,
.hljs-template-variable,
.hljs-regexp,
.hljs-deletion,
.hljs-keyword,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-attr {
  color: #e38800;
}

.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #8d44eb;
}

.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-attr {
  color: #e77600;
}

.hljs-attribute {
  color: #108de8;
}

.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #2AAB51;
}

.hljs-subst,
.hljs-number {
  color: #ED6E55;
}

.hljs-title,
.hljs-section,
.hljs-name {
  color: #fa3d58;
}

.hljs {
  display: block;
  overflow-x: auto;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

• github gist

/**
 * highlight.js Theme
 * GitHub Gist Theme
 * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
 */
.hljs{display:block;overflow-x:auto;color:#333;}
.hljs-comment,
.hljs-meta{color:#969896;}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote{color:#df5000;}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type{color:#a71d5d;}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute{color:#0086b3;}
.hljs-section,
.hljs-name{color:#63a35c;}
.hljs-tag{color:#333;}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo{color:#795da3;}
.hljs-addition{color:#55a532;background-color:#eaffea;}
.hljs-deletion{color:#bd2c00;background-color:#ffecec;}
.hljs-link{text-decoration:underline;}

/**
 * highlight.js Theme
 * GitHub Gist Theme
 * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
 */
.hljs{display:block;overflow-x:auto;color:#333;}
.hljs-comment,
.hljs-meta{color:#969896;}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote{color:#df5000;}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type{color:#a71d5d;}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute{color:#0086b3;}
.hljs-section,
.hljs-name{color:#63a35c;}
.hljs-tag{color:#333;}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo{color:#795da3;}
.hljs-addition{color:#55a532;background-color:#eaffea;}
.hljs-deletion{color:#bd2c00;background-color:#ffecec;}
.hljs-link{text-decoration:underline;}

board{width: 0;height: 0;opacity: 0;}

## js
`js`生成行号

addCodeOl();
function addCodeOl() {
var codes = $(‘code.hljs’);
if (codes) {
\((‘code.hljs’).each(function (index, item) { var num = (\)(this).height() – 0) / 22; //22是代码块的行高，num是总高度除以行高得出的总行数
var ol = \((‘<ol></ol>’); var n = 1; while (n <= num) { ol.append(\)(‘

`css`优化行号

折叠和复制