Bu derste Jquery nin bir plugini ni anlatacam.Pluginimiz Snippet.Bu plugin sayesinde sitemize koyduğumuz kodları renklendirebiliriz.Bir çok renklendirme plugini mevcut ama bu hoşuma gitti ve kullanımı basit.
İlk olarak kodlardan başlayalım.
index.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="kod.php" method="post"><!-- Basit bir form.Kodları göndermek için. -->
<textarea name="kod"cols="30" rows="10"></textarea>
<input type="submit" value="gönder" />
</form>
</body>
</html>
kod.php
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery.snippet.min.css">
<script type="text/javascript" src="jquery.snippet.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".kod").snippet("html",{style:"neon",
//burda ilk olarak alanımızı seçiyoruz.alt kısım pre olmak zorunda.
//sonra kodun ne kodu olacağını yazıyoruz.ben html yaptım 15 tane var sanırım bakalım.
//daha sonrada alanın temasını giriyoruz.ben neon u seçtim daha çok var.
clipboard:"ZeroClipboard.swf",//bu mouse ile üzerine geldiğimizde copy seçeniğini açar.altta menu kapalı olduğu için şuan çalışmıyo :)
showNum:true,//bu kodların başındaki sayıları açıp kapar.
collapse:true,//bu kod alanını açma kapama tuşunu aktif yapıyo.
startCollapsed:false,//bu direk kodun açık gelmesini sağlıyo.
showMsg:"Kod Alanını AÇ",
hideMsg:"Kod Alanını KAPA",//bu kısım anlaşır zaten açma kapama yazıları.:)
menu:true//son olarak mouse ile kod üzerine gelindeğin bazı özel seçenekleri açar.
});
});
</script>
</head>
<body>
<pre class="kod">
<?php
$a=htmlspecialchars($_POST["kod"]);//burda kodu post ile alıp htmlspecialchars ile karektere çeviriyom yoksa
//kod olarak işeleme alınmıyo direk işliyo :)
echo $a;//kodu ekrana yaz.
?>
</pre>
</body>
</html>
indir: http://ustaderslik.com/dosya/Jquery%20Snippet(Kod%20Renklendirici-Vurgulayıcı).rar
video:
UstaDerslik
