اضافه syntax highlighter صندوق الاكواد الملون بميزات احترافيه

السلام عليكم ورحمه الله وبركاته

بناء علي طلب بعض الاخوه الكرام

اقدم لكم صندوق الاكواد المرقم والملون

+

ميزه تحديد الكل

+

ميزه اختلاف لون كل صندوق عن الاخر بحسب اللغه

اعتذر عن التأخر في تنفيذ الطلب

الان نبدأ

اولا قم بالبحث عن

</head>

واضف فوقه الكود التالي

<style>
/*----------------------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;text-align:left}pre::after{content:&#39;اضغط مرتين لتحديد الكود&#39;;padding:2px 10px;width:auto;height:auto;position:absolute;right: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,&#39;Andale Mono&#39;,&#39;Courier New&#39;,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:&#39;Code&#39;;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 &gt; 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 &gt; span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows &gt; span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms}pre[data-codetype=&#39;CSSku&#39;]:before{background-color:#00a1d6}pre[data-codetype=&#39;HTMLku&#39;]:before{background-color:#3cc888}pre[data-codetype=&#39;JavaScriptku&#39;]:before{background-color:#75d6d0}pre[data-codetype=&#39;JQueryku&#39;]:before{background-color:#e5b460}
</style>
<script src='https://ayana-tech1.googlecode.com/svn/trunk/code-box-num-2-new-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> 

والان تم اضافه الاداه للقالب

بقي طريقه استخدام الصناديق

عند كتابه الموضوع قم بتحويل صندوق الكتابه 

من تأليف الي Html

ثم قم بلصق كود الصندوق الذي تريده في اخر الاكواد في صفحه Html

ثم عد مره اخري الي تأليف ستجد كلمه Here

قم بإستبدالها بالكود المراد إظهاره داخل الصندوق

تأكد من العوده الي تأليف

كود الصندوق للغه Html

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">Here</code></pre>

كود الصندوق للغه Css

<pre title="CSS" data-codetype ="CSSku"><code class="language-css">here</code></pre>

كود الصندوق للغه Javascript

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">Here</code></pre>

كود الصندوق للغه JQuery

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">Here</code></pre>

الان انتهينا من الموضوع 

لاتنسوا دعمنا

Mohamed Abouayana

2 Comments

اضافات البلوجر, اضافات بلوجر, css

معلومات التدوينه !

عنوان التدوينة: اضافه syntax highlighter صندوق الاكواد الملون بميزات احترافيه
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Mohamed Abouayana
التسميات : اضافات البلوجر ، اضافات بلوجر ، css
توقيت النشر : 1:45 م

عدد التعليقات : 2

عدد المشاهدات :