<?php echo "Syntax Highlighter" . "/Code Snippet/Plugin"; ?> <br />

Stvar koja mi je trebala (prvenstveno zbog PHP vodiča) za lakše uređivanje i pisanje postova jest stavljanje izvornog/source koda na pregled na stranicu, a da se isti ne renderira (prevede). Izvorni Wordpressov je nešto siromašan, tj. nešto prevodi, nešto ne i sl. Tražio sam neki dodatak (plugin) koji bi imao mogućnost “farbanja” (bojenja) koda, tj. da se kod može vrlo lako i jednostavno pratiti i čitati te da ništa ne prevađa (npr. <br> tag u HTML – što bi značilo red ispod). Našao sam jedan vrlo zanimljiv imena CodeHighlighter te se ispočetka činio i više nego dobar (čak je imao mogućnost da se ubace linije sa lijeve strane po želji). No kada je došao php kod u kojem je bio HTML (točnije <br> tag) – isti se prevodio te tako samo prikazivanje koda nije bilo ispravno. Pokušao sam editirati neke datoteke, dodati <br> tag u Visual rasporedu, no sve bez uspjeha – on ga je i dalje tupo prevodio.

Tada sam išao u potragu za drugim pluginom te pronašao to što mi je falilo, jednostavnog imena WP-Syntax. Dopušta bojenje koda, dodavanje linija sa strane po želji, te odabir jezika (puna lista podržanih jezika) pri tipu koda tako da kod dodajete na način:

Plugin prije njega kojim nisam bio zadovoljan (CodeHighlighter) te sada navedeni WP-Syntax bazirani su na GeSHi “sustavu” koji kako sam već naveo podržava vrlo široki spektar dostupnih jezika.

Par primjera kako to izgleda u praksi (kodovi su preuzeti sa CodeHighlighter):

C++

class nsScannerBufferList
{
public:
/**
  * Buffer objects are directly followed by a data segment. The start
  * of the data segment is determined by increment the |this| pointer
  * by 1 unit.
  */
class Buffer : public PRCList
{
public:
Buffer() {
++index_;
}

PHP (sa početnom linijom 5)

5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
for ($i = 0; $i < strlen( $utf8_string ); $i++ ) {
 
$value = ord( $utf8_string[ $i ] );
 
if ( $value &lt; 128 ) {
// ASCII
$unicode .= chr($value);
} else {
if ( count( $values ) == 0 ) {
$num_octets = ( $value < 224 ) ? 2 : 3;
}
$values[] = $value;

Perl (sa početnom linijom 1)

1
2
3
4
5
6

my ($class, $mail, $orig) = @_;
my $new_list = $class->_detect($orig) or return;
$new_list->add_to_posts({mail => $mail->id})
    unless Email::Store::List::Post->search( mail => $mail->id,
        list => $new_list->id
    );

CSS

pre {
border: 1px solid #ccc; padding: 0em 0.5em;
 
/* Browser specific (not valid) styles to make preformatted text wrap */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
#
}
 
.strike {
text-decoration: line-through;
}

<p style="text-align: center"><a href="/images/phpmysql_2/original/15.jpg"><img style="margin: 5px" src="/images/phpmysql_2/15_thumb.jpg" alt="PHP & MySQL vodič - osnove" /></a></p>

Ovo je jedan od naslova u PHP vodiču

<a name=skupovi_znakova_strings><p style="font-size: 1.5em; border-top:1px dashed black; border-bottom:1px dashed black">Skupovi znakova (eng. strings) | <strong><a href="#"><font color=blue>strings.php</font></a></strong></p></a>

I tako dalje, vrlo su dugački/zahtjevni te mi trebaju kako bi stranica imala svoj prepoznatljiv “izgled”, sve slike jednake, svi naslovi jednaki, sve naredbe (kod PHP-a npr.) iste boje i tako dalje. Ukoliko radite u “Visual” načinu rada, moguće da će vam nabacati hrpu toga nepotrebnoga. Također, volim imati stvari “pod kontrolom” tako da mogu direktno editirati svaki dio posta, bilo boja ili opis slike. Prednost takvog načina je kao što sam rekao preciznost, kontrola te validne stranice (pod predpostavkom da se zna pravilno pisati HTML/CSS kod).

Nedostatak takvog načina je velika sporost. Kako bih to barem malo ubrzao kopirao sam si sve bitnije tagove u .txt dokument iz kojeg samo copy/pasteam u post(ove) te izmijenim naslov, putanju i sl. Međutim, to je opet bilo pomalo sporo zbog prebacivanja između prozora, selektiranja, kopiranja i tako dalje. Tražio sam rješenje da sam dodam svoje vlastite gumbe u HTML pregled u Wordpress npr. za naslov bi otvoreni tag bio

<a name=anchor><p style="font-size: 1.5em; border-top:1px dashed black; border-bottom:1px dashed black">

a zatvoreni

</p></a>

Baš kao i za npr. bold, italic i sl. što je već ugrađeno u sam Wordpress. I nakon malo guglanja, našao sam ga. Potrebno je editirati JavaScript datoteku wp-includes/js/quicktags.js – te ručno kopirajući 7 redova dodati vlastiti gumb. Pošto su unutra već neki postavljeni, dovoljno ih je kopirati te izmijeniti za svoje potrebe, oni će se već sami automatski ubaciti u sam layout (raspored) HTML pregleda. Tako imamo npr.

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_code'
,'code'
,'<code>'
,'</code>'
,'c'
);

Kopiramo naveden dio, zalijepimo ispod te izmijenimo za svoje potrebe.
Liniju 1 te 2 ostavite kako jesu, jedino izmijenite nastavak nakon ed_ u nešto suvislo, npr. za spoiler sam ja stavio jednostavno – spoiler.
Linija 3 označuje ime tj. što će pisati na gumbu koji će vam se prikazati u editoru.
Linija 4 je početak taga (otvoreni dio).
Linija 5 je završetak taga (zatvoren dio).
Linija 6 postavite po želji, npr. početno slovo taga.

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_spoiler'
,'spoiler'
,'[spoiler name=""]'
,'[/spoiler]'
,'sp'
);

Kod koji sam upravo stavio je moj gumb za ubacivanje spoilera (sadržaj koji ne smije biti odmah prikazan, npr. kraj nekog filma) u post, selektiram tekst te kliknem na gumb i automatski se tagovi dodaju okolo njega.