Light-Year-Example
/
test_example_v4.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>HTML+CSS+JS代码演示示例 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个基于Bootstrap v4.4.1的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/v4/css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/v4/css/style.min.css" rel="stylesheet">
<style>
[data-toggle=buttons] > .btn-group > .btn input[type=checkbox],
[data-toggle=buttons] > .btn-group > .btn input[type=radio],
[data-toggle=buttons] > .btn input[type=checkbox],
[data-toggle=buttons] > .btn input[type=radio] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
.code-window {
	border: 1px solid #eceeef;
	border-radius: 3px;
	margin: 30px 0;
	box-shadow: 0 2px 8px rgba(0,0,0,.07)
}
.code-window .window-bar {
	height: 38px;
	border-top: 1px solid #eaeae9;
	border-bottom: 1px solid #dfdfde;
	background: #ebebeb
}
.code-window .window-bar .circles {
	margin: 6px 10px 0;
	float: left
}
.code-window .window-bar .circles .circle {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid #fff
}
.code-window .window-bar .circles .circle-red {
	background-color: #f96868;
	border-color: #f96868
}
.code-window .window-bar .circles .circle-yellow {
	background-color: #faa64b;
	border-color: #faa64b
}
.code-window .window-bar .circles .circle-green {
	background-color: #15c377;
	border-color: #15c377
}
.code-window .window-bar .circles .window-title {
	margin-left: 16px;
	font-size: 13px;
	color: #818a91
}
.code-window .window-bar .languages {
	margin: 6px 10px 0;
	float: right
}
.code-window .window-bar .languages .btn {
	padding: 2px 10px;
	background-color: #fff;
	color: #ccc;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
	margin-top: 0;
	border: none;
	transition: all .4s ease
}
.code-window .window-bar .languages .btn.active,
.code-window .window-bar .languages .btn:active {
	color: #48b0f7;
	box-shadow: none
}
.code-window:not(pre)>code[class*=language-],
.code-window pre[class*=language-] {
	background-color: #fff;
	border: none;
	margin: 0;
	padding-bottom: 10px;
	max-height: 585px
}
.code-window pre[class*=language-][data-language]:before {
	display: none
}
.code-window .line-numbers .line-numbers-rows {
	background-color: #f7f7f7;
	border-right: none;
	padding-bottom: 8px
}
.code-window .line-numbers-rows>span:before {
	color: #ccc
}
.code-window .line-numbers:after {
	content: '';
	background-color: #f7f7f7;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 3em;
	height: 20px
}
.code-preview {
	padding: 16px
}

/* 代码样式 */
code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

/*  */
pre.line-numbers {
	padding-left: 3.8em;
	counter-reset: a
}
pre.line-numbers,pre.line-numbers>code {
	position: relative
}
.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em;
	letter-spacing: -1px;
	border-right: 1px solid #999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
.line-numbers-rows>span {
	pointer-events: none;
	display: block;
	counter-increment: a
}
.line-numbers-rows>span:before {
	content: counter(a);
	color: #999;
	display: block;
	padding-right: .8em;
	text-align: right
}
pre[class*=language-] {
	position: relative
}
pre[class*=language-][data-language]:before {
	content: attr(data-language);
	color: #000;
	background-color: #cfcfcf;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	font-size: .9em;
	border-radius: 0 0 0 5px;
	padding: 0 .5em;
	text-shadow: none
}
</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><div class="card-title">HTML+CSS+JS代码演示示例</div></div>
        <div class="card-body">

          <p>HTML+CSS+JS代码按照相应的格式，便可呈现以下的效果，在文章中能直接演示并且切换查看代码，相当的方便，不过要注意的是，因为是直接在页面中的，可能会受到当前页面样式对示例的影响。</p>
<div class="code-window">
  <div class="code-preview">
    <p>This is a normal paragraph without any contextual classes.</p>
    <p class="text-primary">A paragraph with .text-primary class.</p>
    <p class="text-success">A paragraph with .text-success class.</p>
    <p class="text-info">A paragraph with .text-info class.</p>
    <p class="text-warning">A paragraph with .text-warning class.</p>
    <p class="text-danger">A paragraph with .text-danger class.</p>
    <p class="text-gray">A paragraph with .text-gray class.</p>
    <p class="text-dark">A paragraph with .text-dark class.</p>
  </div>

<pre class="line-numbers"><code class="language-html">&lt;p&gt;This is a normal paragraph without any contextual classes.&lt;/p&gt;
&lt;p class=&quot;text-primary&quot;&gt;A paragraph with .text-primary class.&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;A paragraph with .text-success class.&lt;/p&gt;
&lt;p class=&quot;text-info&quot;&gt;A paragraph with .text-info class.&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;A paragraph with .text-warning class.&lt;/p&gt;
&lt;p class=&quot;text-danger&quot;&gt;A paragraph with .text-danger class.&lt;/p&gt;
&lt;p class=&quot;text-gray&quot;&gt;A paragraph with .text-gray class.&lt;/p&gt;
&lt;p class=&quot;text-dark&quot;&gt;A paragraph with .text-dark class.&lt;/p&gt;
</code></pre>

<pre class="line-numbers"><code class="language-css">.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info    { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger  { color: #F44336; }
.text-purple  { color: #6D5CAE; }
.text-teal    { color: #00BFA5; }
.text-gray    { color: #bbbbbb; }
.text-dark    { color: #424242; }
.text-white   { color: #ffffff; }
</code></pre>

<pre class="line-numbers"><code class="language-javascript">$('.sidenav.dropable > li > a').click(function(e){
  if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
      return;
  }
  e.preventDefault();
  $(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
  $(this).next("ul").slideDown(300);
});
</code></pre>

</div>


        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.min.js"></script>
<script type="text/javascript" src="js/prism.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".code-window").each(function(a, b) {
        var c = '<div class="window-bar"><div class="circles">';

        c += '<span class="circle circle-red"></span> <span class="circle circle-yellow"></span> <span class="circle circle-green"></span>',

        $(this).attr("data-title") && (c += '<span class="window-title">' + $(this).data("title") + "</span>"),

        c += "</div>",

        $(this).children().length > 1 && (c += '<div class="languages"><div class="btn-group" data-toggle="buttons">', $(this).children().each(function(a, b) {
            var d = "", e = "", f = "";
            0 == a && (d = " active", e = " checked"),
            $(this).children("code").attr("class") ? (f = $(this).children("code").attr("class"), f = f.replace("language-", ""), f = f.toLowerCase(), "markup" == f && (f = "html")) : $(this).hasClass("code-preview") && (f = "示例"),
            c += '<label class="btn' + d + '"><input type="radio" autocomplete="off"' + e + ">" + f + "</label>"
        }), c += "</div></div>"),
        c += "</div>",
        $(this).children(":not(:first)").hide(0),
        $(this).children().wrapAll('<div class="window-content"></div>'),
        $(this).prepend(c);
        var d = $(this).children(".window-content");
        $(this).find(".window-bar .btn-group .btn").on("click",
        function() {
            var a = $(this).index();
            d.children(":visible").fadeOut(200,
            function() {
                d.children(":eq(" + a + ")").fadeIn(200)
            })
        })
    });

    var b = $('[data-toggle="buttons"]');
    b.length > 0 && b.find('.btn').on('click', function() {
        $(this).addClass("active").siblings().removeClass('active');
    });
});
</script>
</body>
</html>