Forráskód kiemelés a blogban

Akik esetleg régebb óta követik a blogom, már észrevehették, hogy bekerült egy látványos újítás. Méghozzá az, hogy a tutorialokban szereplő forráskódok szintaxisa mostantól színekkel vannak elszeparálva. A látványon túl sokat javult a kód olvashatósága, könnyebb megértése.

Mindehhez számos kódkiemelő, úgynevezett "syntax highlighter" szkriptet kipróbáltam, de valahogy egyik sem volt az igazi. Eddig... Végül rábukkantam a Prism.js-re, aminek az integrálás pofon egyszerű. A forráskód blokkokhoz a "<pre>" HTML tag-et szoktam alkalmazni. Nos, a szkript meghívása után, nincs más dolgunk, csak hogy a "<pre>" tag-en belül elhelyezzünk egy "<code>" tag-et is, annak adjunk egy stílus osztály, ami definiálja tulajdonképpen, hogy milyen nyelvet is kell kiszíneznie, illetve értelmeznie.

A Prism.js letöltési oldalán ki tudod választani, hogy milyen nyelveket vegyen majd figyelembe, illetve, hogy milyen színsémát használjon fel hozzá. A legvégén pedig a be kell illeszteni a weboldalba a kigenerált CSS és JavaScript fájlokat.

HTML

<p>Helló Prism.js</p>

CSS

.hello {
	color: #0088cc;
}

#hello {
	color: #ed9c28;
}

#hello span {
	color: #777777;
}

JavaScript

<script type="text/javascript">
$(document).ready(function() {
	alert('Hello Prism.js');
});
</script>

PHP

<?php
echo 'Hello Prism.js';
?>

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.