مدونة فيصل تون

مدونة فيصل تون .. مدونة عربية تهتم بالتصميم الجرافيكي وملحقات التصميم وتطوير الويب وبلوجر والأجهزة اللوحية وتطبيقاتها وتنزيل الكتب الإلكترونية.

أحدث المواضيع

random
جاري التحميل ...

اترك تعليقك

تركيب إضافة "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) ، ومن ثم إنسخ الكود بعد تحويله .. وإنتهينا.

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

عن الكاتب

Faisal Mohsen

التعليقات


اتصل بنا

إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

جميع الحقوق محفوظة

مدونة فيصل تون