فبراير 24, 2019

تركيب صندوق لتضمين شفرة برمجية Syntax Highlighter

تركيب صندوق لتضمين شفرة برمجية Syntax Highlighter

قم بالنزول للأسفل...!!


أكواد التضمين المعاينة
كود التضمين لعرض شفرة برمجية بـ لغة HTML

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ...مكان وضع الكــــــود... </code></pre> 
<!-- HTML -->
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">
...مكان وضع الكــــــود...
</code></pre>

<!-- CSS -->
<pre title="CSS" data-codetype ="CSSku"><code class="language-css">
...مكان وضع الكــــــود...
</code></pre>

<!-- JavaScript -->
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">
...مكان وضع الكــــــود...
</code></pre>

<!-- jQuery -->
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">
...مكان وضع الكــــــود...
</code></pre>
كود التضمين لعرض شفرة برمجية بـ لغة CSS

<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ...مكان وضع الكــــــود... </code></pre> 
/*===================================================

              = Syntax Highlighter =
  
===================================================*/
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2B303B;
    position: relative;
    max-height: 500px;
    text-align: left;
    direction: ltr;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #363c4a;
    padding: 10px;
    left: 0;
    right: 0;
    color: #8790a1;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #8790a1;
    line-height: 20px;
}

pre:hover::after {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
opacity:0;
    top: -8px;
    visibility: visible;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #C0C5CE;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

pre code .token.prolog{/* ?xml version  */
    color: #777;
}
pre code .token.doctype{/* !DOCTYPE html  */
    color: #777;
}
pre code .token.cdata {/*css js ![CDATA[  */
    color: #777;
}
pre code .token.url{
    color: #ccc;
}
pre .language-css .token.string{
    color: #ccc;
}
pre .style .token.string {
    color: #ccc;
}
pre code .token.atrule {
    color: #009999;
}
pre code .token.atrule{
    color: #1baeb0;
}
pre code .token.regex {
    color: #ccc;
}
pre code .token.important {
    font-weight: bold;
}
pre code .token.entity{/*html  &quot &gt */
    color: #759bb9;
    cursor: help;
}
pre code .namespace {/*html  b:variable  */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";
filter:alpha(opacity=0.8);
opacity:.8;
}
pre code .token.tag, .language-markup .token.punctuation {/*html  tag  */
    color: #A3BE8C;
}
pre code .token.attr-name {/*html  class id href  */
    color: #C0C5CE;
}
pre code .token.selector {/*css  #blogg-code  */
    color: #759bb9;
}
pre code .token.property {/*css  font-size  */
    color: #759bb9;
}
pre code .token.comment {/*  comment code  */
    color: #8c919a;
    font-style: italic;
}
pre code .token.punctuation {/*  });,:  */
    color: #8FA1B3;
}
pre code .token.operator {/*  = +  ! */
    color: #4d9bd8;
}
pre code .token.number, pre code .token.boolean {/*  1 false  */
    color: #cec768;
}
pre code .token.attr-value {/*  'value'  */
    color: #CC846D;
}
pre code .token.string {/*  "#blogg-code"  */
    color: #A3BE8C;
}
pre code .token.keyword {/*  var function if  */
    color: #f79029;
    font-style: italic;
}
code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
}
/*======comments pre======*/
.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}
/*=======line numbers========*/
pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='HTMLku']:before {
    color: #CC846D;
}

pre[data-codetype='CSSku']:before {
    color: #759bb9;
}

pre[data-codetype='JavaScriptku']:before {
    color: #d4b447;
}
pre[data-codetype='JQueryku']:before {
    color: #f79029;
}
/*=======transition=======*/
pre::after {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/*=======border radius=======*/
pre, .comments pre::before {
    border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
كود التضمين لعرض شفرة برمجية بـ لغة Javascript

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ...مكان وضع الكــــــود... </code></pre> 
<script src='https://rawgit.com/Blogg-code/Syntax-Highlighter/master/Prism.js' type='text/javascript'/>
كود التضمين لعرض شفرة برمجية بـ لغة jQuery

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ...مكان وضع الكــــــود... </code></pre> 
//Line Number
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)});
//SelectorAll
for(var pres=document.querySelectorAll("var,samp,strong,em,code,pre,kbd,blockquote,div.codtext,value,textarea"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
كود التضمين لعرض شفرة برمجية بـدون Highlighter تظليل النص

<pre title='CODE'><code> ...مكان وضع الكــــــود... </code></pre> 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
 
<script>
$( "p" ).last().addClass( "selected" );
</script>
 
</body>
</html>
الاشتراك في: الرسائل (Atom)

جميع الحقوق محفوظة © لموقع | معاينة ميريا ويب .