syntax highlighter

سيو بلوجر: تضمين اكواد 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>

#container-demo {
background: #e5e5e5!important;
position: relative;
width: 100%;
overflow: hidden;
display: block;
padding: 10px;
}
#main-wrapper {
width: 100% !important;
}
#sidebar-wrapper, .post-title {
display: none !important;
}
/*——title table——*/
caption {
padding-top: 8px;
padding-bottom: 8px;
color: #363c4a;
text-align: center;
font-size: 14px;
}
caption.heading {
background-color: #e4e4e4;
border: none;
border-top: none;
border-radius: 0;
font-size: 1.5em;
}
/*—–default table——*/
table {border-collapse: collapse;border-spacing: 0;
/*for Table going out of div*/
table-layout: fixed;width: 100%;}
/*——table responsive——*/
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {padding: 8px;line-height: 1.42857143;vertical-align: top;}
.table-responsive {position: relative;overflow: auto;margin: 20px 0;}
.table-responsive table {display: table;width: 100%;max-width: 100%;}
.table-responsive tr {background-color:#fbfbfb!important;}
.table-responsive tr:nth-of-type(odd) {background-color: #f7f7f7!important;}
.table-responsive td{color:#363c4a!important;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;border-color: #f3f3f3!important;overflow:hidden;}
.table-responsive th{font-size:14px;font-weight:700;padding:10px 5px;overflow:hidden;word-break:normal;}
.table-responsive th, .table-responsive tr:last-child{border-style: solid;border-width: 1px 1px 5px;border-color: #e4e4e4!important;}
.table-responsive .th-col,
.table-responsive .th-row{background-color:#eeeeee !important;color:#363c4a!important;}
.table-responsive .th-col{text-align:center !important}
.table-responsive .th-row{text-align:center !important}
/*——title table——*/
caption {padding-top: 8px;padding-bottom: 8px;color: #525252;text-align: center;font-size: 14px;}
caption.heading {background-color: #e4e4e4;border: none;border-top: none;color: #ffffff;border-radius: 0;font-size: 1.5em;}

/*—————–*/
.browser-window {
position: relative;
overflow: auto;
padding: 10px;
margin: .5em 0;
background-color: #ffffff;
width: 550px;
max-height: 500px;
}
.browser-window .grid-edit-code {
padding: 5px 15px;
margin: 0 0 2em 0;
background-color: #fbfbfb;
}

.browser-window .grid-edit-code h6, .browser-window .grid-edit-code h3 {
background: $(keycolor);
color: #FFFFFF;
padding: 5px 10px;
font-size: 13px;
clear: both;
}
.browser-window .grid-edit-code h3 {
background: #A3BE8C;
display: inline-block;
}
.browser-window .module-color {
margin: 0 0 10px 0;
padding: 10px 0;
border-bottom: 5px solid white;
font-size: 12px;
line-height: normal;
}
/*===================================================
= 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;font:14px ‘Consolas’,’Monaco’,monospace,Courier,Courier New;}
pre code .token.prolog{color:#777;}
pre code .token.doctype{color:#777;}
pre code .token.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{color:#759bb9;cursor:help;}
pre code .namespace{-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)”;filter:alpha(opacity=0.8);opacity:.8;}
pre code .token.tag,.language-markup .token.punctuation{color:#A3BE8C;}
pre code .token.attr-name{color:#C0C5CE;}
pre code .token.selector{color:#759bb9;}
pre code .token.property{color:#759bb9;}
pre code .token.comment{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{color:#cec768;}
pre code .token.attr-value{color:#f79029;}
pre code .token.string{color:#A3BE8C;}
pre code .token.keyword{color:#94719c;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:#f79029;}
pre[data-codetype=’CSSku’]:before{color:#759bb9;}
pre[data-codetype=’JavaScriptku’]:before{color:#d4b447;}
pre[data-codetype=’JQueryku’]:before{color:#94719c;}
/*=======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;}

/*/g,”>”).replace(/u00a0/g,” “)};if(y.hooks.run(“before-highlight”,g),t&&self.Worker){var l=new Worker(y.filename);l.onmessage=function(e){g.highlightedCode=c.stringify(JSON.parse(e.data)),g.element.innerHTML=g.highlightedCode,a&&a.call(g.element),y.hooks.run(“after-highlight”,g)},l.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=y.highlight(g.code,g.grammar),g.element.innerHTML=g.highlightedCode,a&&a.call(e),y.hooks.run(“after-highlight”,g)}}},highlight:function(e,t){return c.stringify(y.tokenize(e,t))},tokenize:function(e,t){var a=y.Token,n=[e],r=t.rest;if(r){for(var i in r)t[i]=r[i];delete t.rest}e:for(var i in t)if(t.hasOwnProperty(i)&&t[i]){var s=t[i],g=s.inside,l=!!s.lookbehind||0;s=s.pattern||s;for(var o=0;oe.length)break e;if(!(c instanceof a))if(s.lastIndex=0,u=s.exec(c)){l&&(l=u[1].length);var u,p=u.index-1+l,h=p+(u=u[0].slice(l)).length,d=c.slice(0,p+1),f=c.slice(h+1),m=[o,1];d&&m.push(d);var b=new a(i,g?y.tokenize(u,g):u);m.push(b),f&&m.push(f),Array.prototype.splice.apply(n,m)}}}return n},hooks:{all:{},add:function(e,t){var a=y.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=y.hooks.all[e];if(a&&a.length)for(var n,r=0;n=a[r++];)n(t)}}},c=y.Token=function(e,t){this.type=e,this.content=t};if(c.stringify=function(e){if(“string”==typeof e)return e;if(“[object Array]”==Object.prototype.toString.call(e)){for(var t=0;t

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More