Bootstrap3 带语法着色功能的可切换标签

Bootstrap tab syntax highlighter 可用于一些图文+代码演示的HTML在线教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2182
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

#wrapper {
    margin: 20px auto;
}
#codes {
    border-bottom: 1px solid #5f5f5f;
    background-color: #34312c;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
#codes > li {
    padding: 8px 0px 8px 8px;
}
#codes > li > a {
    position: relative;
    display: block;
    padding: 3px 15px;
    border-radius: 4px;
    color: #fefdf9;
    cursor: pointer !important;
}
#codes > li > a:active,
#codes > li > a:focus,
#codes > li > a:hover,
#codes > li.active > a,
#codes > li.active > a:focus,
#codes > li.active > a:hover {
    position: relative;
    display: block;
    padding: 3px 15px;
    border-radius: 4px;
    color: #fdb839;
    cursor: default;
    background-color: #655f56;
    border: 1px solid #3e3a33;
    border-bottom-color: transparent;
    /*Override prettify design*/
}
pre,
code {
    white-space: pre;
    border: 0 !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* UXCam scheme for google prettify*/
}
pre.prettyprint {
    display: block;
    background-color: #3e3a33;
}
pre .nocode {
    background-color: none;
    color: #000;
}
pre .str {
    color: #fdb839;
    /* string */
}
pre .kwd {
    color: #fdb839;
}
pre .com {
    color: #b3b3b3;
    /* commen */
}
pre .typ {
    color: #fdb839;
    /* type */
}
pre .lit {
    color: #cd5c5c;
    /* literal */
}
pre .pun {
    color: #fff;
    /* punctuation */
}
pre .pln {
    color: #fdb839;
    /* plaintext */
}
pre .tag {
    color: #fdb839;
    /* html/xml tag */
}
pre .atn {
    color: #bdb76b;
    /* attribute name */
}
pre .atv {
    color: #fdb839;
    /* attribute value */
}
pre .dec {
    color: #fdb839;
    /* decimal */
    /* Specify class=linenums on a pre to get line numbering */
}
ol.linenums {
    margin-top: 0;
    margin-bottom: 0;
    color: #aeaeae;
    /* IE indents via margin-left */
}
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8 {
    list-style-type: decimal !important;
    /* Alternate shading for lines */
}
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
    background-color: transparent !important;
}
.linenums li {
    border-left: 1px solid #656565;
}
@media print {
    pre .str,
    code .str {
        color: #060;
    }
    pre .kwd,
    code .kwd {
        color: #006;
    }
    pre .com,
    code .com {
        color: #600;
    }
    pre .typ,
    code .typ {
        color: #404;
    }
    pre .lit,
    code .lit {
        color: #044;
    }
    pre .pun,
    code .pun {
        color: #440;
    }
    pre .pln,
    code .pln {
        color: #000;
    }
    pre .tag,
    code .tag {
        color: #006;
    }
    pre .atn,
    code .atn {
        color: #404;
    }
    pre .atv,
    code .atv {
        color: #060;
    }
}

HTML

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab-1-content">
    <pre class="prettyprint linenums lang-java">
  // Everything is controlled with id="codes"
  // lang-java class is added to &lt;pre&gt; to read # tag
  &lt;ul id="codes" class="nav nav-tabs" role="tablist"&gt;
    .......
  &lt;/ul&gt;
  //@Override prettyprint with custom colours
  //Change the colour codes of the codes in here.
  pre .str { color: #fdb839; } /* string   */
  pre .kwd { color: #fdb839; }
  pre .com { color: #B3B3B3; } /* comment  */
  pre .typ { color: #fdb839; } /* type     */
  pre .lit { color: #cd5c5c; } /* literal  */
  pre .pun { color: #fdb839; } /* punctuation */
  pre .pln { color: #fdb839; } /* plaintext */
  pre .tag { color: #fdb839; } /* html/xml tag     */
  pre .atn { color: #bdb76b; } /* attribute name   */
  pre .atv { color: #fdb839; } /* attribute value  */
  pre .dec { color: #fdb839; } /* decimal          */
    </pre>
</div>
    <div role="tabpanel" class="tab-pane" id="tab-2-content">
      <pre class="prettyprint linenums lang-java">
  // To show line numbers add linenums class to &lt;pre&gt;
  // Change the line border color 
  .linenums li{
     border-left: 1px solid colour;
  }
  
      </pre>
    </div>
  </div>
</div>

Bootstrap tab syntax highlighter 可用于一些图文+代码演示的HTML在线教程

编辑器支持Emmet

快捷键

Bootstrap tab syntax highlighter 可用于一些图文+代码演示的HTML在线教程

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

three.js + openlayers gis 3d example

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：