حصريا على مدونة المايسترو لخدمات البلوجر شرح تركيب Syntax Highlighter لمدونات بلوجر لاظهار اكواد الاتش تى ام ال وال سى اس اس بالشكل كما فى الصوره السابقه
معاينة واختبار شكل الاكواد يمكنك تصفح مواضيع المايسترو للتعرف كيف تظهر الاكواد بعض اضافة Syntax Highlighter
اليوم وفقط من خلال مدونة المايسترو ابسط شرح حصرى لتركيب Syntax Highlighter الى مدونات البلوجر
تابع معى الشرح
ينقسم شرح تركيب Syntax Highlighter الى قسمين فقط وهما
الخطوه الاولى
1- من لوحة تحكم المدونه اختر قالب
2- اختر تحرير html
3- ابحث عن هذا الكود </b:skin> وضع فوقه مباشرتا الكود التالى
رمز Code:
/*--- 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> وضع فوقه مباشرتا الكود التالى
رمز Code:
<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 لمدونات بلوجر
عند اضافتك لاكواد html او اكواد css او حتى java فى مواضيع بلوجر لا تظهر الاكواد مكتوبه وانما تظهر فعليا
لذلك عند ادراجك لكود معين فى مشاركات بلوجر يجب عليك اولا تحويل هذا الكود باستخدام محول الاكواد HTML Encoder
للدخول الى موقع محول الاكواد HTML Encoder يمكنك زيارته محول الاكواد من هنا
بعد تحويلك للكود المراد اظهاره فى مشاركاتك على بلوجر استخدم الكود التالى الخاص بـ Syntax Highlighter
رمز Code:
<pre class="brush:xml">هنا يتم وضع الكود المراد اظهاره مكتوب فى مشاركات بلوجر</pre>
رمز Code:
<blockquote><pre class="brush:xml">هنا يتم وضع الكود المراد اظهاره مكتوب فى مشاركات بلوجر</pre></blockquote>
اذا واجهتك اى مشكله او لديك استفسار بخصوص شرح تركيب Syntax Highlighter لمدونات بلوجر لا تتردد فى كتابة تعليق من هنا
ليست هناك تعليقات: