تركيب إضافة "Prism Syntax Highlighter" الرائعة لكتابة الأكواد في تدوينات بلوجر

ليست هناك تعليقات
تركيب إضافة "Prism Syntax Highlighter" الرائعة لكتابة الأكواد في تدوينات بلوجر
تركيب إضافة "Prism Syntax Highlighter" الرائعة لكتابة الأكواد في تدوينات بلوجر

تُعتبر من أهم وأجمل الاضافات التي يجب ان تكون في كل مدونة متخصصة في تطوير المواقع والويب، و ما يُميّز هذه الاضافة أنّها تُمكنك من إدراج أكواد CSS , JavaScript ,jQuery ,HTML مع تمييز ألوان الأكواد والوسوم بطريقة رائعة للغاية.



طريقة التركيب :

1. قم بالدخول إلى لوحة تحكم المدونة > قالب > تحرير HTML.
2. ابحث عن الوسم ]]></b:skin>  و اضف الكود التالي فوقه:


/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    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;
    left: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

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

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.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-radius: 4px;
    border: none;
}

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

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

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='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {
    background-color: #e5b460;
}

 

3. ابحث عن الوسم </body> و اضف الثلاثة الأكواد التالية فوقه:

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>

<script>
$('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)})
</script>


<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

إلى هنا نكون قد إنتهينا من تركيب الإضافة، إضغط حفظ للقالب.

4. الآن ولإستخدام الإضافة عند كتابة موضوع جديد ، يجب أن تنتقل إلى وضع HTML ونسخ كود ونسخ الكود التالي (مع وضع الاكواد التي تريدها بين الأكواد):


<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> add HTML codes here... </code></pre>

<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> add CSS codes here...</code></pre>

<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> add Java Script codes here...</code></pre>

<pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> add JQuery codes here...</code></pre>

تنبيه هام : لعرض أكواد HTML في التدوينة يجب تحويل كود HTML إلى (Escaped Characters) حتى لا يتم قرائته ، ويمكنكم ذلك من خلال الموقع التالي:
كل ما عليك هو نسخ الكود HTML المطلوب ولصقه في الحقل (Convert Raw HTML to Escaped HTML) وثم الضغط على زر (Convert to escaped characters) ، ومن ثم إنسخ الكود بعد تحويله .. وإنتهينا.

إذا كان لدى أي أحد إستفسار أو واجهته أي مشكلة عند التركيب ، يرجى كتابة ذلك في تعليق بالأسفل وسأعمل على الردّ عليه ومساعدته وحلّ المشكلة بإذن الله تعالى.

ليست هناك تعليقات:

إترك تعليقك

اترك تعليقك

جميع الحقوق محفوظة © 2016 - مدونة فيصل الورشة