js实现html、css、js代码高亮显示并且可拖拽效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：js实现html、css、js代码高亮显示并且可拖拽效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

<style>
    * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  overflow-x: hidden;
  font-family: sans-serif;
  color: white;
  background: #343436;
  padding: 0;
  margin: 0;
  line-height: 1.35;
  min-height: 100%;
  display: flex;
}
.panel-accordion {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-height: 100%;
  border-top: 1px solid #666;
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  display: flex;
}
.code-panel {
  padding-left: 20px;
  width: 33.333%;
  float: left;
  position: relative;
  min-height: 100%;
  background: #1D1F20;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.box {
  position: relative;
  height: 100%;
  width: 100%;
  flex-grow: 1;
}
.code-panel-dragbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background-color: #505050;
  background-image: linear-gradient(to right, #505050, #383838);
  cursor: col-resize;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.code-panel-titlebar {
  background-color: #1A1C1D;
  padding: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.code-panel-titlebar-title {
  font-weight: bold;
  font-size: 18px;
  display: inline-block;
  transition: transform 0.2s;
  transform-origin: left center;
}
.is-horiz-skinny .code-panel-titlebar-title {
  transform: translate(-16px, -5px) rotate(90deg) scale(0.9);
  pointer-events: none;
}
.code-panel-content {
  padding: 10px;
  font-size: 14px;
  white-space: pre-wrap;
  margin: 0;
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  min-width: 200px;
  color: #DEF;
}
[id^="codepen-syntax-demo-"] {
  padding: 0.5em;
  min-height: 100%;
}
.CodeMirror-code pre {
  margin-top: 0;
  margin-bottom: 0;
}
</style>
  
  
  
<style>
.box pre {
  font-family: 'Source Code Pro', Monaco, Consolas, monospace, "Andale Mono", "lucida console", "Courier New";
}
.box,
.editor .top-boxes,
.CodeMirror-gutter-wrapper,
#example-embed {
  background: hsl(250, 14%, 18%);
  /* e.g. // comments */
}
.box .cm-tag.cm-bracket,
.editor .top-boxes .cm-tag.cm-bracket,
.CodeMirror-gutter-wrapper .cm-tag.cm-bracket,
#example-embed .cm-tag.cm-bracket,
.box .cm-operator,
.editor .top-boxes .cm-operator,
.CodeMirror-gutter-wrapper .cm-operator,
#example-embed .cm-operator,
.box .cm-string-2,
.editor .top-boxes .cm-string-2,
.CodeMirror-gutter-wrapper .cm-string-2,
#example-embed .cm-string-2 {
  color: hsl(250, 12%, 46%);
}
.box pre,
.editor .top-boxes pre,
.CodeMirror-gutter-wrapper pre,
#example-embed pre {
  color: hsl(250, 24%, 74%);
}
.box .cm-attribute,
.editor .top-boxes .cm-attribute,
.CodeMirror-gutter-wrapper .cm-attribute,
#example-embed .cm-attribute {
  color: hsl(250, 98%, 86%);
}
.box .cm-def,
.editor .top-boxes .cm-def,
.CodeMirror-gutter-wrapper .cm-def,
#example-embed .cm-def {
  color: hsl(30, 100%, 66%);
}
.box .cm-variable-2,
.editor .top-boxes .cm-variable-2,
.CodeMirror-gutter-wrapper .cm-variable-2,
#example-embed .cm-variable-2 {
  color: hsl(250, 98%, 86%);
}
.box #html-box .cm-atom,
.editor .top-boxes #html-box .cm-atom,
.CodeMirror-gutter-wrapper #html-box .cm-atom,
#example-embed #html-box .cm-atom,
.box .cm-string,
.editor .top-boxes .cm-string,
.CodeMirror-gutter-wrapper .cm-string,
#example-embed .cm-string {
  color: hsl(30, 100%, 80%);
}
.box .cm-property,
.editor .top-boxes .cm-property,
.CodeMirror-gutter-wrapper .cm-property,
#example-embed .cm-property,
.box .cm-meta,
.editor .top-boxes .cm-meta,
.CodeMirror-gutter-wrapper .cm-meta,
#example-embed .cm-meta {
  color: hsl(250, 96%, 78%);
}
.box .cm-tag,
.editor .top-boxes .cm-tag,
.CodeMirror-gutter-wrapper .cm-tag,
#example-embed .cm-tag {
  color: hsl(250, 100%, 96%);
}
.box .cm-variable,
.editor .top-boxes .cm-variable,
.CodeMirror-gutter-wrapper .cm-variable,
#example-embed .cm-variable,
.box .cm-keyword,
.editor .top-boxes .cm-keyword,
.CodeMirror-gutter-wrapper .cm-keyword,
#example-embed .cm-keyword,
.box .cm-qualifier,
.editor .top-boxes .cm-qualifier,
.CodeMirror-gutter-wrapper .cm-qualifier,
#example-embed .cm-qualifier,
.box #css-box .cm-tag,
.editor .top-boxes #css-box .cm-tag,
.CodeMirror-gutter-wrapper #css-box .cm-tag,
#example-embed #css-box .cm-tag {
  color: hsl(250, 100%, 96%);
}
.box .cm-keyword,
.editor .top-boxes .cm-keyword,
.CodeMirror-gutter-wrapper .cm-keyword,
#example-embed .cm-keyword,
.box .cm-atom,
.editor .top-boxes .cm-atom,
.CodeMirror-gutter-wrapper .cm-atom,
#example-embed .cm-atom,
.box #css-box .cm-variable,
.editor .top-boxes #css-box .cm-variable,
.CodeMirror-gutter-wrapper #css-box .cm-variable,
#example-embed #css-box .cm-variable {
  color: hsl(30, 100%, 80%);
}
.box .cm-number,
.editor .top-boxes .cm-number,
.CodeMirror-gutter-wrapper .cm-number,
#example-embed .cm-number {
  color: hsl(30, 100%, 80%);
}
.box .cm-comment,
.editor .top-boxes .cm-comment,
.CodeMirror-gutter-wrapper .cm-comment,
#example-embed .cm-comment {
  color: hsla(250, 12%, 46%, 0.8);
}
.box .CodeMirror-linenumber,
.editor .top-boxes .CodeMirror-linenumber,
.CodeMirror-gutter-wrapper .CodeMirror-linenumber,
#example-embed .CodeMirror-linenumber {
  color: hsla(250, 14%, 30%, 0.5);
}
.box .cm-strong,
.editor .top-boxes .cm-strong,
.CodeMirror-gutter-wrapper .cm-strong,
#example-embed .cm-strong,
.box .cm-em,
.editor .top-boxes .cm-em,
.CodeMirror-gutter-wrapper .cm-em,
#example-embed .cm-em,
.box .cm-builtin,
.editor .top-boxes .cm-builtin,
.CodeMirror-gutter-wrapper .cm-builtin,
#example-embed .cm-builtin,
.box .cm-header,
.editor .top-boxes .cm-header,
.CodeMirror-gutter-wrapper .cm-header,
#example-embed .cm-header,
.box .cm-unit,
.editor .top-boxes .cm-unit,
.CodeMirror-gutter-wrapper .cm-unit,
#example-embed .cm-unit {
  color: red;
  text-decoration: underline;
}
</style>



</head>

<body translate="no" >
  <div class="panel-accordion">
  <div class="code-panel code-panel-1">
    <div class="code-panel-dragbar"></div>
    <header class="code-panel-titlebar">
      <span class="code-panel-titlebar-title">HTML</span>
    </header>
    <section id="codepen-syntax-demo-html" class="box box-html">
      <!--[if lt IE]> <style type="text/css"> body { display: none; } </style> <![endif]-->    
      <div id="html-box" class="CodeMirror-code">
         <pre><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">div</span> <span class="cm-attribute">class</span>=<span class="cm-string">"class-name"</span> <span class="cm-attribute">id</span>=<span class="cm-string">"id-name"</span><span class="cm-tag cm-bracket">&gt;</span><br>   <span class="cm-comment">&lt;!--[if lt IE]&gt;</span><br>      <span class="cm-comment">&lt;style type="text/css"&gt;body { display: none; }&lt;/style&gt;</span><br>   <span class="cm-comment">&lt;![endif]--&gt;</span><br>   <br>   <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span>Heading<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span><br>   <br>   <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>Hello world!<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span><br>   <br>   <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">&gt;</span><br>     <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"first"</span><span class="cm-tag cm-bracket">&gt;</span>Lorem ipsum dolor sit amet, conse.<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span><br>     <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"second"</span><span class="cm-tag cm-bracket">&gt;</span>Aliquam tincidunt mauris eu risus.<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span><br>     <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span> <span class="cm-attribute">class</span>=<span class="cm-string">"third"</span><span class="cm-tag cm-bracket">&gt;</span>Vestibulum auctor dapibus neque.<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span><br>   <span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">&gt;</span><br>   <br>   <span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">img</span> <span class="cm-attribute">src</span>=<span class="cm-string">"path/to/reallyCoolImage.jpg"</span> <span class="cm-attribute">alt</span>=<span class="cm-string">"Cool Image"</span> <span class="cm-tag cm-bracket">/&gt;</span><br><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">div</span><span class="cm-tag cm-bracket">&gt;</span><br><br><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"js/vendor/jquery-1.11.3.min.js"</span><span class="cm-tag cm-bracket">&gt;</span><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">&gt;</span></pre>
      </div>
   </section>
  </div>

  <div class="code-panel code-panel-2">
    <div class="code-panel-dragbar"></div>
    <header class="code-panel-titlebar">
      <span class="code-panel-titlebar-title">CSS</span>
    </header>
    <section id="codepen-syntax-demo-css" class="box box-css">
      <div id="css-box" class="CodeMirror-code">
         <pre><span class="cm-tag">html</span>, <span class="cm-tag">body</span>  {<br>   <span class="cm-property">font-size</span>: <span class="cm-number">10px</span>;<br>   <span class="cm-property">box-sizing</span>: <span class="cm-atom">border-box</span>;<br>}<br><br><span class="cm-variable-2">@variable</span>: <span class="cm-atom">#ff0000</span>;<br><span class="cm-variable-2">@var2</span>: <span class="cm-keyword">blue</span>;<br><span class="cm-variable-2">@var3</span>: <span class="cm-number">33.3333%</span>;<br><br><span class="cm-qualifier">.box</span> {<br>   <span class="cm-property">background</span>: <span class="cm-variable-2">@variable</span>;<br>   <span class="cm-property">width</span>: <span class="cm-variable-2">@var3</span>;<br>   <span class="cm-property">text-justify</span>: <span class="cm-variable">distribute-all-lines</span>;<br>   <span class="cm-property">min-height</span>: <span class="cm-number">100%</span>;<br>   <span class="cm-property">position</span>: <span class="cm-atom">absolute</span>;<br>   <span class="cm-property">top</span>: <span class="cm-number">0</span>;<br>   <span class="cm-property">left</span>: <span class="cm-number">0</span>;<br>   <span class="cm-property">padding</span>: <span class="cm-number">2px</span>;<br>   <span class="cm-property">font-size</span>: <span class="cm-number">2rem</span><span class="cm-keyword">!important</span>;<br><br>   <span class="cm-def">@media</span> <span class="cm-keyword">only</span> <span class="cm-attribute">screen</span> <span class="cm-keyword">and</span> (<span class="cm-property">max-width</span>: <span class="cm-number">529px</span>) {<br>      <span class="cm-property">width</span>: <span class="cm-number">100%</span>;<br>   }<br>}<br><br><span class="cm-comment">// Add a line break between succeeding elements</span><br>* + * { <span class="cm-property">margin-top</span>: <span class="cm-number">1.5em</span> }<br><br><span class="cm-tag">h2</span>:<span class="cm-variable-3">after</span> {<br>   <span class="cm-property">content</span>: <span class="cm-string">"\00a9"</span>;<br>   <span class="cm-property">display</span>: <span class="cm-atom">block</span>;<br>   <span class="cm-property">height</span>: <span class="cm-number">1px</span>;<br>   <span class="cm-property">box-shadow</span>: <span class="cm-number">0</span> <span class="cm-number">1px</span> <span class="cm-number">1px</span> <span class="cm-atom">rgba</span>(<span class="cm-number">0</span>,<span class="cm-number">0</span>,<span class="cm-number">0</span>, <span class="cm-number">0.2</span>);<br>   <span class="cm-property">background-image</span>: <span class="cm-atom">linear-gradient</span>( <span class="cm-atom">to</span> <span class="cm-atom">right</span>,<br>      <span class="cm-keyword">red</span>, <span class="cm-keyword">green</span>);<br>}</pre>
      </div>
   </section>
  </div>

  <div class="code-panel code-panel-3">
    <div class="code-panel-dragbar"></div>
    <header class="code-panel-titlebar">
      <span class="code-panel-titlebar-title">JS</span>
    </header>
    <section id="codepen-syntax-demo-js" class="box box-js">
      <div id="js-box" class="CodeMirror-code">
         <pre><span class="cm-variable">module</span>.<span class="cm-property">exports</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>( <span class="cm-def">grunt</span> ) {<br>    <span class="cm-string">"use strict"</span>;<br><br>    <span class="cm-keyword">function</span> <span class="cm-def">readOptionalJSON</span>( <span class="cm-def">filepath</span> ) {<br>        <span class="cm-keyword">var</span> <span class="cm-def">data</span> <span class="cm-operator">=</span> {};<br>        <span class="cm-keyword">try</span> {<br>            <span class="cm-variable-2">data</span> <span class="cm-operator">=</span> <span class="cm-variable">JSON</span>.<span class="cm-property">parse</span>( <span class="cm-variable">stripJSONComments</span>(<br>                <span class="cm-variable">fs</span>.<span class="cm-property">readFileSync</span>( <span class="cm-variable-2">filepath</span>, { <span class="cm-property">encoding</span>: <span class="cm-string">"utf8"</span> } )<br>            ) );<br>        } <span class="cm-keyword">catch</span> ( <span class="cm-def">e</span> ) {}<br>        <span class="cm-keyword">return</span> <span class="cm-variable-2">data</span>;<br>    }<br><br>    <span class="cm-keyword">var</span> <span class="cm-def">fs</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>( <span class="cm-string">"fs"</span> ),<br>        <span class="cm-def">stripJSONComments</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>( <span class="cm-string">"strip-json-comments"</span> ),<br>        <span class="cm-def">gzip</span> <span class="cm-operator">=</span> <span class="cm-variable">require</span>( <span class="cm-string">"gzip-js"</span> ),<br>        <span class="cm-def">srcHintOptions</span> <span class="cm-operator">=</span> <span class="cm-variable-2">readOptionalJSON</span>( <span class="cm-string">"src/.jshintrc"</span> ),<br>        <span class="cm-def">newNode</span> <span class="cm-operator">=</span> <span class="cm-operator">!</span><span class="cm-string-2">/^v0/</span>.<span class="cm-property">test</span>( <span class="cm-variable">process</span>.<span class="cm-property">version</span> ),<br><br>        <span class="cm-comment">// Allow to skip jsdom-related tests in Node.js &lt; 1.0.0</span><br>        <span class="cm-def">runJsdomTests</span> <span class="cm-operator">=</span> <span class="cm-variable-2">newNode</span> <span class="cm-operator">||</span> ( <span class="cm-keyword">function</span>() {<br>            <span class="cm-keyword">try</span> {<br>                <span class="cm-variable">require</span>( <span class="cm-string">"jsdom"</span> );<br>                <span class="cm-keyword">return</span> <span class="cm-atom">true</span>;<br>            } <span class="cm-keyword">catch</span> ( <span class="cm-def">e</span> ) {<br>                <span class="cm-keyword">return</span> <span class="cm-atom">false</span>;<br>            }<br>        } )();<br><br>    <span class="cm-comment">// The concatenated file won't pass onevar</span><br>    <span class="cm-comment">// But our modules can</span><br>    <span class="cm-keyword">delete</span> <span class="cm-variable-2">srcHintOptions</span>.<span class="cm-property">onevar</span>;<br><br>    <span class="cm-keyword">if</span> ( <span class="cm-operator">!</span><span class="cm-variable-2">grunt</span>.<span class="cm-property">option</span>( <span class="cm-string">"filename"</span> ) ) {<br>        <span class="cm-variable-2">grunt</span>.<span class="cm-property">option</span>( <span class="cm-string">"filename"</span>, <span class="cm-string">"jquery.js"</span> );<br>    }<br><br>    <span class="cm-variable-2">grunt</span>.<span class="cm-property">initConfig</span>( {<br>        <span class="cm-property">pkg</span>: <span class="cm-variable-2">grunt</span>.<span class="cm-property">file</span>.<span class="cm-property">readJSON</span>( <span class="cm-string">"package.json"</span> ),<br>        <span class="cm-property">dst</span>: <span class="cm-variable-2">readOptionalJSON</span>( <span class="cm-string">"dist/.destination.json"</span> ),<br>        <span class="cm-string cm-property">"compare_size"</span>: {<br>            <span class="cm-property">files</span>: [ <span class="cm-string">"dist/jquery.js"</span>, <span class="cm-string">"dist/jquery.min.js"</span> ],<br>            <span class="cm-property">options</span>: {<br>                <span class="cm-property">compress</span>: {<br>                    <span class="cm-property">gz</span>: <span class="cm-keyword">function</span>( <span class="cm-def">contents</span> ) {<br>                        <span class="cm-keyword">return</span> <span class="cm-variable-2">gzip</span>.<span class="cm-property">zip</span>( <span class="cm-variable-2">contents</span>, {} ).<span class="cm-property">length</span>;<br>                    }<br>                },<br>                <span class="cm-property">cache</span>: <span class="cm-string">"build/.sizecache.json"</span><br>            }<br>        },<br>        <span class="cm-property">babel</span>: {<br>            <span class="cm-property">options</span>: {<br>                <span class="cm-property">sourceMap</span>: <span class="cm-string">"inline"</span>,<br>                <span class="cm-property">retainLines</span>: <span class="cm-atom">true</span><br>            },<br>            <span class="cm-property">nodeSmokeTests</span>: {<br>                <span class="cm-property">files</span>: {<br>                    <span class="cm-string cm-property">"test/node_smoke_tests/lib/ensure_iterability.js"</span>:<br>                        <span class="cm-string">"test/node_smoke_tests/lib/ensure_iterability_es6.js"</span><br>                }<br>            }<br>        },<br>        <span class="cm-property">build</span>: {<br>            <span class="cm-property">all</span>: {<br>                <span class="cm-property">dest</span>: <span class="cm-string">"dist/jquery.js"</span>,<br>                <span class="cm-property">minimum</span>: [<br>                    <span class="cm-string">"core"</span>,<br>                    <span class="cm-string">"selector"</span><br>                ],<br><br>                <span class="cm-comment">// Exclude specified modules if the module matching the key is removed</span><br>                <span class="cm-property">removeWith</span>: {<br>                    <span class="cm-property">ajax</span>: [ <span class="cm-string">"manipulation/_evalUrl"</span>, <span class="cm-string">"event/ajax"</span> ],<br>                    <span class="cm-property">callbacks</span>: [ <span class="cm-string">"deferred"</span> ],<br>                    <span class="cm-property">css</span>: [ <span class="cm-string">"effects"</span>, <span class="cm-string">"dimensions"</span>, <span class="cm-string">"offset"</span> ],<br>                    <span class="cm-string cm-property">"css/showHide"</span>: [ <span class="cm-string">"effects"</span> ],<br>                    <span class="cm-property">sizzle</span>: [ <span class="cm-string">"css/hiddenVisibleSelectors"</span>, <span class="cm-string">"effects/animatedSelector"</span> ]<br>                }<br>            }<br>        },<br>        <span class="cm-property">npmcopy</span>: {<br>            <span class="cm-property">all</span>: {<br>                <span class="cm-property">options</span>: {<br>                    <span class="cm-property">destPrefix</span>: <span class="cm-string">"external"</span><br>                },<br>                <span class="cm-property">files</span>: {<br>                    <span class="cm-string cm-property">"sizzle/dist"</span>: <span class="cm-string">"sizzle/dist"</span>,<br>                    <span class="cm-string cm-property">"sizzle/LICENSE.txt"</span>: <span class="cm-string">"sizzle/LICENSE.txt"</span>,<br><br>                    <span class="cm-string cm-property">"npo/npo.js"</span>: <span class="cm-string">"native-promise-only/npo.js"</span>,<br><br>                    <span class="cm-string cm-property">"qunit/qunit.js"</span>: <span class="cm-string">"qunitjs/qunit/qunit.js"</span>,<br>                    <span class="cm-string cm-property">"qunit/qunit.css"</span>: <span class="cm-string">"qunitjs/qunit/qunit.css"</span>,<br>                    <span class="cm-string cm-property">"qunit/LICENSE.txt"</span>: <span class="cm-string">"qunitjs/LICENSE.txt"</span>,<br><br>                    <span class="cm-string cm-property">"qu.........完整代码请登录后点击上方下载按钮下载查看