تغيير الاقتباس في المدونة الى أشكال رائعة مع تمييز أنواع الاكواد

السلام عليكم ,في هده التدوينة سنتعرف على طريقة تغيير شكل الاقتباس مع تمييز كل من الاكواد على حدة بحيث سنعطي شكل لاكواد html وشكل لاكواد Javascript وايضا شكل لاكواد cssالطريقة سهلة تابع ,

                 

                                             المعاينة 

1 ) توجه الى لوحة تحكم بلوجر 

2 ) القالب تحرير html 

3 ) ثم بعد دالك  ابحث عن الوسم ]]></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;
    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,'
    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='CSSku']:before {
    background-color: #00a1d6;
}
pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}
pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}
pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

2 ) إبحث عن الوسم  </head>
أضف فوقه 

<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>

3 ) ابحث عن  </body>
أضف فوقه هدا الكود 

<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>
<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>

4 ) وأخيرا عند  كتابة المشاركة اظغط على html كما في الصورة

ثم لاضافة كود من نوع html استعمل هدا الكود في المشاركة

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">هنا ظع كود html</code></pre>

ثم لاضافة كود css إستعمل هدا الكود

<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> هنا ضع كود 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>

هدا كل ما في الامر شارك الموضوع رجاء ولا تنسى التقييم ولايك ^_^