Cum sa formatam codul in articolele WordPress (Syntax Highlighting)?
6Exista multe persoane ce folosesc in articolele lor diverse snippeturi in limbaje de programare(sau scripting) cum ar fi : C/C++,PHP,Javascript,HTML, C#, Java etc. Multi dintre acestea doresc sa usureze munca cititorului in descifrarea codului, implementand diverse solutii pentru syntax highlighting.Voi prezenta metoda ce o folosesc pe blogul worldit, folosindu-ma de unul din proiectele open source de acest gen : Syntax Highlightings
1. Descarcati arhivele js.rar si styles.rar
2. Uploadati folderul din arhiva js.rar in folderul temei : /wp-content/themes/TEMA_BLOG/
3. Uploadati folderul din arhiva styles.rar in folderul temei : /wp-content/themes/TEMA_BLOG/
4. Editati fisierul in care aveti footerul temei , in general e footer.php
5. Adaugati urmatorul cod inainte de tagul </body>
<?php if(is_single() || is_page()) : ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shCore.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushBash.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushCpp.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushCSharp.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushCss.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushDelphi.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushDiff.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushGroovy.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushJava.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushJScript.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushPhp.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushPlain.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushPython.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushRuby.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushScala.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushSql.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushVb.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/shBrushXml.js"></script> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '<?php bloginfo('template_directory'); ?>/js/clipboard.swf'; SyntaxHighlighter.all(); </script> <?php endif; ?>
6. Editati fisierul ce contine headerul paginii , in general header.php si cautati tagul </head> adaugand codul urmator oriunde deasupra lui
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/shCore.css" type="text/css" media="screen" /> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/TEMA.css" type="text/css" media="screen" />
TEMA.css poate fi unul din temele stilulilor pentru formatarea codului :
1. shThemeDefault.css [Demo] 2. shThemeDjango.css [Demo] 3. shThemeEmacs.css [Demo] 4. shThemeFadeToGrey.css [Demo] 5. shThemeMidnight.css [Demo] 6. shThemeRDark.css [Demo]
7. Adaugati un snippet astfel :
<tag class="brush:limbaj"> //codul ce il dorim transformat </tag>
Acest sistem suporta aproximativ 30 de limbaje de programare si scripting ceea ce este mai mult decat suficient pentru oricare dintre voi. Lista completa a limbajelor de programare suportate o gasiti aici.
8. Cam atat! 😀
Daca acest articol contine o greseala, selecteaza cuvintele sau fraza gresita si tasteaza combinatia de taste Shift + Enter sau apasa click aici pentru a o raporta. Multumim!
Mama cate js-uri de incarcat… nu sunt cam multe, totusi? :-s
Tu le incarci doar cele de care ai nevoie. Si in total incarcate imi ocupa ~100KB .Eu pe blog incarc doar aproximativ 20 KB deoarece am selectat doar limbajele ce le folosesc aici : C/C++,PHP,XML,JS ,C# si cam atat.
vezi ca e scris gresit codul care trebuie pus in header. e pus spatiu inainte de ?php si nu merge ca lumea.
oricum, mie nici asa vad ca nu prea imi merge ca lumea 😕
Multumesc Grim pentru avertisment.
Ce intelegi prin nu iti merge calumea? Explica pasii ce i-ai urmat 🙂
1. am copiat folderele js si styles in folderul themei mele
2. am deschis footer.php si am copiat traznaile alea
3. am deschis header.php si am copiat si celelalte traznai, modificand din TEMA.css in shThemeDefault.css
4. Am adaugat un cod css asa: codul
5. am publicat articolul
6. nothing happened
Problema rezolvata, pentru cei care intampina probleme de formatare a codului desi au facut toti pasii , un exemplu de cod formatat ar trebui sa arate astfel :
<pre class=”brush:LIMBAJ”>
cod formatat
</pre>