لاضافة أكواد HTML الى المدونة

27‏/04‏/2010






كود الcss



.codeview {

margin : 15px 35px 15px 15px;

padding : 10px;

clear : both;

list-style-type : none;

background : #f9f9f9 url(http://img17.imageshack.us/img17/5162/codeview.gif) no-repeat right bottom;

border-top : 1px solid #eeeeee;

border-right : 2px solid #cccccc;

border-bottom : 2px solid #cccccc;

border-left : 1px solid #eeeeee;

}

.codeview li {

font-size : 13px;

line-height : 24px;

font-family : "Courier New", "MS Sans Serif", sans-serif, serif;

color : #FFFFFF;

font-weight : normal;

margin : 0;

padding : 0;

}


كود ال HTML



<div class="codeview"> هنا تضع الكود </div>


و ادا وجدت مشكلة فاستخدم هدا  الموقع


الطريقة الثانية



من لوحة تحكمك في بلوجر إذهب إلي : التخطيط > تحرير HTML.
 
ثم ضع علامة صح علي الإختيار : توسيع قوالب عناصر واجهة المستخدم.
 . أضغط علي CTRL + F للبحث من خلال المتصفح عن الوسم التالي :



</head>


ثم أضف قبله مباشرة هذا الكود



<link href='http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js' type='text/javascript'/>

<script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js' type='text/javascript'/>


. أضغط CTRL + F مرة أخري و أبحث عن :



</body>


ثم أضف قبله مباشرة هذا الكود



<script language='javascript'>

function start() {

dp.SyntaxHighlighter.BloggerMode();

dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';

dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);

}

window.onload = start;

</script>

شرح كيفية الإستخدام

قم بكتابة تدوينتك بالطريقة المعتادة و عندما تأتي للسطر الذي سوف تبدأ بكتابة كود المصدر فيه,

أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة



<pre name="code" class="css">

هنا يوضع الكود

</pre>
 


مع مراعاة تغيير الـ class لإسم لغة البرمجة الذي ينتمي إليها الكود مثل : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. و هكذا.

و السلام خير ختام