syntax highlighter
19779792034227590
recent
أخبار ساخنة

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>





التعليقات
    نموذج الاتصال
    الاسمبريد إلكترونيرسالة