1/8/2014
أضافة تعليق
 |
| شرح تركيب Syntax Highlighter لمدونات بلوجر |
معاينة واختبار شكل الاكواد يمكنك تصفح مواضيع المايسترو للتعرف كيف تظهر الاكواد بعض اضافة Syntax Highlighter
اليوم وفقط من خلال مدونة المايسترو ابسط شرح حصرى لتركيب Syntax Highlighter الى مدونات البلوجر
تابع معى الشرح
ينقسم شرح تركيب Syntax Highlighter الى قسمين فقط وهما
الخطوه الاولى
1- من لوحة تحكم المدونه اختر قالب
2- اختر تحرير html
3- ابحث عن هذا الكود ]]></b:skin> وضع فوقه مباشرتا الكود التالى
/*--- syntaxhighlighter By th3maestro.com ----*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea{-moz-border-radius:0 0 0 0 !important; -webkit-border-radius:0 0 0 0 !important; background:none !important; border:0 !important; bottom:auto !important; float:none !important; height:auto !important; left:auto !important; line-height:1.5em !important; margin:0 !important; outline:0 !important; overflow:visible !important; padding:0 !important; position:static !important; right:auto !important; text-align:left !important; top:auto !important; vertical-align:baseline !important; width:auto !important; box-sizing:content-box !important; font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important; font-weight:normal !important; font-style:normal !important; font-size:9pt !important; min-height:inherit !important; min-height:auto !important}
.syntaxhighlighter{width:100% !important; margin:0.3em 0px 1em !important; position:relative !important; overflow-x:auto; font-size:9pt; direction:ltr !important; box-shadow:0px 0px 1px silver !important; text-shadow:0px 0px 5px silver !important; padding:5px 0px !important; overflow-y:auto; max-height:370px}
.syntaxhighlighter.source{overflow:hidden !important}
.syntaxhighlighter .bold{font-weight:bold !important}
.syntaxhighlighter .italic{font-style:italic !important}
.syntaxhighlighter .line{white-space:pre !important}
.syntaxhighlighter table{width:100% !important}
.syntaxhighlighter table caption{text-align:left !important; padding:.5em 0 0.5em 1em !important}
.syntaxhighlighter table td.code{width:100% !important}
.syntaxhighlighter table td.code .container{position:relative !important}
.syntaxhighlighter table td.code .container textarea{box-sizing:border-box !important; position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; border:none !important; background:white !important; padding-left:1em !important; overflow:hidden !important; white-space:pre !important}
.syntaxhighlighter table td.gutter .line{text-align:right !important; padding:0 0.5em 0 1em !important}
.syntaxhighlighter table td.code .line{padding:0 1em !important}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line{padding-left:0em !important}
.syntaxhighlighter.show{display:block !important}
.syntaxhighlighter.collapsed table{display:none !important}
.syntaxhighlighter.collapsed .toolbar{padding:0.1em 0.8em 0em 0.8em !important; font-size:1em !important; position:static !important; width:auto !important; height:auto !important}
.syntaxhighlighter.collapsed .toolbar span{display:inline !important; margin-right:1em !important}
.syntaxhighlighter.collapsed .toolbar span a{padding:0 !important; display:none !important}
.syntaxhighlighter.collapsed .toolbar span a.expandSource{display:inline !important}
.syntaxhighlighter .toolbar{display:none !important; position:absolute !important; right:1px !important; top:1px !important; width:11px !important; height:11px !important; font-size:10px !important; z-index:10 !important}
.syntaxhighlighter .toolbar span.title{display:inline !important}
.syntaxhighlighter .toolbar a{display:block !important; text-align:center !important; text-decoration:none !important; padding-top:1px !important}
.syntaxhighlighter .toolbar a.expandSource{display:none !important}
.syntaxhighlighter.ie{font-size:.9em !important; padding:1px 0 1px 0 !important}
.syntaxhighlighter.ie .toolbar{line-height:8px !important}
.syntaxhighlighter.ie .toolbar a{padding-top:0px !important}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content{background:none !important}
.syntaxhighlighter.printing .line .number{color:#bbb !important}
.syntaxhighlighter.printing .line .content{color:black !important}
.syntaxhighlighter.printing .toolbar{display:none !important}
.syntaxhighlighter.printing a{text-decoration:none !important}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a{color:black !important}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a{color:#008200 !important}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a{color:blue !important}
.syntaxhighlighter.printing .keyword{color:#069 !important; font-weight:bold !important}
.syntaxhighlighter.printing .preprocessor{color:gray !important}
.syntaxhighlighter.printing .variable{color:#a70 !important}
.syntaxhighlighter.printing .value{color:#090 !important}
.syntaxhighlighter.printing .functions{color:#ff1493 !important}
.syntaxhighlighter.printing .constants{color:#06c !important}
.syntaxhighlighter.printing .script{font-weight:bold !important}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a{color:gray !important}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a{color:#ff1493 !important}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a{color:red !important}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a{color:black !important}
.syntaxhighlighter{background-color:#EAF2F1 !important}
.syntaxhighlighter .line.alt1{background-color:white !important}
.syntaxhighlighter .line.alt2{background-color:white !important}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2{background-color:#e0e0e0 !important}
.syntaxhighlighter .line.highlighted.number{color:black !important}
.syntaxhighlighter table caption{color:black !important}
.syntaxhighlighter .gutter{color:#afafaf !important}
.syntaxhighlighter .gutter .line{border-right:3px solid #6ce26c !important}
.syntaxhighlighter .gutter .line.highlighted{background-color:#6ce26c !important; color:white !important}
.syntaxhighlighter.printing .line .content{border:none !important}
.syntaxhighlighter.collapsed{overflow:visible !important}
.syntaxhighlighter.collapsed .toolbar{color:blue !important; background:white !important; border:1px solid #6ce26c !important}
.syntaxhighlighter.collapsed .toolbar a{color:blue !important}
.syntaxhighlighter.collapsed .toolbar a:hover{color:red !important}
.syntaxhighlighter .toolbar{color:white !important; background:#6ce26c !important; border:none !important}
.syntaxhighlighter .toolbar a{color:white !important}
.syntaxhighlighter .toolbar a:hover{color:black !important}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a{color:black !important}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a{color:#008200 !important}
.syntaxhighlighter .string, .syntaxhighlighter .string a{color:blue !important}
.syntaxhighlighter .keyword{color:#EF2FD2 !important}
.syntaxhighlighter .preprocessor{color:gray !important}
.syntaxhighlighter .variable{color:#a70 !important}
.syntaxhighlighter .value{color:#090 !important}
.syntaxhighlighter .functions{color:#ff1493 !important}
.syntaxhighlighter .constants{color:#06c !important}
.syntaxhighlighter .script{font-weight:bold !important; color:#069 !important; background-color:none !important}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a{color:gray !important}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a{color:#ff1493 !important}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a{color:red !important}
.syntaxhighlighter .keyword{font-weight:lighter !important}
/*--- syntaxhighlighter By th3maestro.com ----*/
الخطوه الثانيه
ابحث عن هذا الكود </body> وضع فوقه مباشرتا الكود التالى
<link href='https://th3maestro.googlecode.com/svn/trunk/css/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://th3maestro.googlecode.com/svn/trunk/js/shCore.js' type='text/javascript'/>
<script src='https://th3maestro.googlecode.com/svn/trunk/js/shBrushXml.js' type='text/javascript'/>
<script src='https://th3maestro.googlecode.com/svn/trunk/js/shBrushCss.js' type='text/javascript'/>
<script type='text/javascript'>SyntaxHighlighter.all();</script>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 200; /* طول الملخص للمواضيع بدون صورة */
summary_img = 200; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 155; /* عرض الصورة في الملخص*/
img_thumb_width = 220; /*طول الصورة في الملخص */
</script>
الان انتهينا من تركيب Syntax Highlighter لمدونات بلوجر
شرح كيفيه ادراج كود معين فى المشاركات باستخدام Syntax Highlighter لمدونات بلوجر
عند اضافتك لاكواد html او اكواد css او حتى java فى مواضيع بلوجر لا تظهر الاكواد مكتوبه وانما تظهر فعليا
لذلك عند ادراجك لكود معين فى مشاركات بلوجر يجب عليك اولا تحويل هذا الكود باستخدام محول الاكواد HTML Encoder
للدخول الى موقع محول الاكواد HTML Encoder يمكنك زيارته محول الاكواد من هنا
بعد تحويلك للكود المراد اظهاره فى مشاركاتك على بلوجر استخدم الكود التالى الخاص بـ Syntax Highlighter
<pre class="brush:xml">هنا يتم وضع الكود المراد اظهاره مكتوب فى مشاركات بلوجر</pre>
واذا اردت ظهور الكود فى الاقتباس ليكون شكله اكثر جمالا يمكنك استخدام الكود التالى
<blockquote><pre class="brush:xml">هنا يتم وضع الكود المراد اظهاره مكتوب فى مشاركات بلوجر</pre></blockquote>
يمكنك تغيير شكل الاقتباس فى مدونات بلوجر عن طريق هذا الموضوع على مدونة المايسترو تغيير شكل الاقتباس بلوجر
اذا واجهتك اى مشكله او لديك استفسار بخصوص شرح تركيب Syntax Highlighter لمدونات بلوجر لا تتردد فى كتابة تعليق
0 التعليقات على "شرح تركيب Syntax Highlighter لمدونات بلوجر"
إرسال تعليق