شرح تركيب Syntax Highlighter لمدونات بلوجر من المايسترو
 

حصريا على مدونة المايسترو لخدمات البلوجر شرح تركيب Syntax Highlighter لمدونات بلوجر لاظهار اكواد الاتش تى ام ال وال سى اس اس بالشكل كما فى الصوره السابقه

معاينة واختبار شكل الاكواد يمكنك تصفح مواضيع المايسترو للتعرف كيف تظهر الاكواد بعض اضافة Syntax Highlighter

اليوم وفقط من خلال مدونة المايسترو ابسط شرح حصرى لتركيب Syntax Highlighter الى مدونات البلوجر

تابع معى الشرح

ينقسم شرح تركيب Syntax Highlighter الى قسمين فقط وهما

الخطوه الاولى

1- من لوحة تحكم المدونه اختر قالب
2- اختر تحرير html
3- ابحث عن هذا الكود وضع فوقه مباشرتا الكود التالى


رمز 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 ----*/
الخطوه الثانيه
ابحث عن هذا الكود وضع فوقه مباشرتا الكود التالى

رمز Code:






الان انتهينا من تركيب Syntax Highlighter لمدونات بلوجر

شرح كيفيه ادراج كود معين فى المشاركات باستخدام Syntax Highlighter لمدونات بلوجر

عند اضافتك لاكواد html او اكواد css او حتى java فى مواضيع بلوجر لا تظهر الاكواد مكتوبه وانما تظهر فعليا
لذلك عند ادراجك لكود معين فى مشاركات بلوجر يجب عليك اولا تحويل هذا الكود باستخدام محول الاكواد HTML Encoder

للدخول الى موقع محول الاكواد HTML Encoder يمكنك زيارته محول الاكواد من هنا

بعد تحويلك للكود المراد اظهاره فى مشاركاتك على بلوجر استخدم الكود التالى الخاص بـ Syntax Highlighter

رمز Code:
هنا يتم وضع الكود المراد اظهاره مكتوب فى مشاركات بلوجر
واذا اردت ظهور الكود فى الاقتباس ليكون شكله اكثر جمالا يمكنك استخدام الكود التالى

رمز Code:

هنا يتم وضع الكود المراد اظهاره مكتوب فى مشاركات بلوجر

يمكنك تغيير شكل الاقتباس فى مدونات بلوجر عن طريق هذا الموضوع على مدونة المايسترو تغيير شكل الاقتباس للبلوجر المايسترو

اذا واجهتك اى مشكله او لديك استفسار بخصوص شرح تركيب Syntax Highlighter لمدونات بلوجر لا تتردد فى كتابة تعليق من هنا