உங்கள் பிளாக்கரில் அழகு படுத்த
நிரலை நிரலால் செய்துவிடல் - ப்ளாக்கரில் உங்கள் புரோகிராமை அழகாய் தோன்றச் செய்யலாம்
ஒரு நிரலை உங்கள் வலைப்பதிவில் காட்ட வேண்டுமென நினைக்கிறீர்கள். ஆங்காங்கே அந்த நிரல் மொழியின் கட்டளைகளுக்கேற்ப (நிரலிலக்கணம் program grammar) பல வண்ணங்களில் காட்டும்போது பார்க்க கவரும்படியாகவும், படிக்க எளிமையாகவும் இருக்கும். விசுவல் ஸ்டூடியோ, எக்லிப்ஸ், நோட்பேட்++... போன்ற மென்பொருட்களை நிரலெழுத பயன்படுத்தும்போது நிரலாக்கம் நமக்கு எளிமையாய் இருக்க இதுதான் காரணம்.
ப்ளாக்கரில் தன்னியல்பாகவே நிரல்களை எழிலாகக் காட்டும் வசதி இல்லை. நமக்கு வேண்டுமெனில் அதற்கான நிரல் நீட்சிகளை (plugins) சேர்த்துக் கொள்ளலாம். ப்ளாக்கரில் எவ்வாறு நிரல்வரிகளை எழிலாய் தோன்றச் செய்வதென இக்கட்டுரையில் பார்க்கலாம். வேர்ட்பிரஸ் வலைப்பூக்களிலும் நிரல்வரிகளை அழகாகத் தோன்றச் செய்யலாம், ஆனால் அதற்கென உரிய முறையில்.
நான் எனது வலைப்பூவில் பயன்படுத்திப் பார்த்த இரண்டு எழில்நிரலுக்கான நிரல்கள்: (code beautifiers/syntax highlighters/.. அல்லது உங்கள் மொழியில்)
Syntax Highlighter
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Integration
Google Code Prettify
http://code.google.com/p/google-code-prettify/
இதோடல்லாமல் இன்னும் நிறைய நிரலை அழகுபடுத்தும் நிரல்கள் உள்ளனhttp://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/
நமக்கும் ஒரு ப்ளாக் வேண்டுமென முதன்முதலில் விளையாட்டாய் உருவாக்கியhttp://nrsrajkumar.blogspot.com வலைப்பூவில் Syntax Highlighter பயன்படுத்தியிருக்கிறேன். இந்த தமிழ்CPU வலைப்பூவில் Google Code prettify பயன்படுத்தியிருக்கிறேன். அப்படியே உங்கள் மவுசில் வலது க்ளிக் செய்து view page source (தமிழ்CPU வலைப்பூவை) பார்க்கவும், எப்படிப் பயன்படுத்த வேண்டுமென நீங்களே தெரிந்து கொள்ளலாம்.
அந்தந்த நிரல் மொழிகளுக்குத் தகுந்தவாறு வண்ணங்கள் css (Cascading Style Sheets) கோப்பில் எழுதப்பட்டிருக்கும். இவற்றை எங்கு கொடுப்பது? Design தொடுப்பிலிருக்கும் Edit htmlஐ தேர்வு செய்யவும். உங்கள் ப்ளாக்கர் டெம்ப்ளேட்டின் நிரல் தோன்றும்.
<head> டேகினுள் </title>க்கு அடுத்து கீழ்காணும் இரண்டு html வரிகளை சேர்த்து
புதிய பதிவை எழுதும்போது ப்ளாக் எடிட்டரில் Edit Html தேர்ந்தெடுக்கவும்
ஒரு html நிரலை உங்கள் பதிவில் காட்டவேண்டுமென நினைக்கிறீர்கள். எடுத்துகாட்டாக கீழ்காணும் html வரிகளை <pre> </pre> டேகிற்குள் எழுதுகிறோம் என வைத்துக் கொள்ளுங்கள்.
நாம் <pre> டேகினுள் சேர்த்த html வரிகளை எழுத்தாக தோன்றச் செய்ய மட்டும் எண்ணியிருந்தாலும், உங்கள் உலாவி இதை html இலக்கணமாக எடுத்துக்கொள்வதால் சிக்கல் ஏற்படும்.
இதற்கு html மொழியிலேயே தீர்வு இருக்கிறது. அவைதான் html entities. < அனைத்து டேகிலும் வருவதால் அதை கட்டளை எழுத்தாக அல்லாமல் எழுத்தாக தோன்ற செய்வதற்கு < entityயாக எழுத வேண்டும். காப்புரிமை குறியீட்டிற்கு © என வரும். இப்படி htmlலில் பல entityக்கள் உள்ளது.
நாம் காட்ட நினைக்கும் html நிரலில் உள்ள அனைத்து குறியீட்டையும் ஒவ்வொன்றாக மாற்றிக் கொண்டிருக்க முடியாது. அதற்கு நிரல் மூலமாகவே தீர்வுகாண முடியும். இப்பிரச்சனைக்கு தீர்வுதரும் ஒரு நிரல்தான்
http://www.string-functions.com/htmlencode.aspx
ப்ளாக்கரில் தன்னியல்பாகவே நிரல்களை எழிலாகக் காட்டும் வசதி இல்லை. நமக்கு வேண்டுமெனில் அதற்கான நிரல் நீட்சிகளை (plugins) சேர்த்துக் கொள்ளலாம். ப்ளாக்கரில் எவ்வாறு நிரல்வரிகளை எழிலாய் தோன்றச் செய்வதென இக்கட்டுரையில் பார்க்கலாம். வேர்ட்பிரஸ் வலைப்பூக்களிலும் நிரல்வரிகளை அழகாகத் தோன்றச் செய்யலாம், ஆனால் அதற்கென உரிய முறையில்.
நான் எனது வலைப்பூவில் பயன்படுத்திப் பார்த்த இரண்டு எழில்நிரலுக்கான நிரல்கள்: (code beautifiers/syntax highlighters/.. அல்லது உங்கள் மொழியில்)
Syntax Highlighter
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Integration
Google Code Prettify
http://code.google.com/p/google-code-prettify/
இதோடல்லாமல் இன்னும் நிறைய நிரலை அழகுபடுத்தும் நிரல்கள் உள்ளனhttp://www.1stwebdesigner.com/css/16-free-javascript-code-syntax-highlighters-for-better-programming/
நமக்கும் ஒரு ப்ளாக் வேண்டுமென முதன்முதலில் விளையாட்டாய் உருவாக்கியhttp://nrsrajkumar.blogspot.com வலைப்பூவில் Syntax Highlighter பயன்படுத்தியிருக்கிறேன். இந்த தமிழ்CPU வலைப்பூவில் Google Code prettify பயன்படுத்தியிருக்கிறேன். அப்படியே உங்கள் மவுசில் வலது க்ளிக் செய்து view page source (தமிழ்CPU வலைப்பூவை) பார்க்கவும், எப்படிப் பயன்படுத்த வேண்டுமென நீங்களே தெரிந்து கொள்ளலாம்.
<!DOCTYPE html> <html b:version='2'> <head> ... <title>தமிழ்CPU</title> <link href='http://google-code-prettify.googlecode.com/svn/trunk /src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk /src/prettify.js' type='text/javascript'></script> ... ...
அந்தந்த நிரல் மொழிகளுக்குத் தகுந்தவாறு வண்ணங்கள் css (Cascading Style Sheets) கோப்பில் எழுதப்பட்டிருக்கும். இவற்றை எங்கு கொடுப்பது? Design தொடுப்பிலிருக்கும் Edit htmlஐ தேர்வு செய்யவும். உங்கள் ப்ளாக்கர் டெம்ப்ளேட்டின் நிரல் தோன்றும்.
<head> டேகினுள் </title>க்கு அடுத்து கீழ்காணும் இரண்டு html வரிகளை சேர்த்து
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>டெம்ப்ளேட்டை சேமிக்கவும். இந்த டெம்ப்ளேட்டை ஒருமுறை சேமித்தால் போதுமானது. ஒவ்வொரு பதிவிற்கு மாற்றம் செய்யத் தேவையில்லை. இனி எங்கெல்லாம் (தேவைப்படும் பதிவில்) ஒரு நிரலை அழகாகத் தோன்றச் செய்ய வெண்டுமென நினைக்கிறீர்களோ, உங்கள் நிரலை எளிதாக pre டேகினுள் தந்துவிடவும்.
புதிய பதிவை எழுதும்போது ப்ளாக் எடிட்டரில் Edit Html தேர்ந்தெடுக்கவும்
உங்கள் பதிவில் காட்ட நினைக்கும் நிரலை கீழ்காணுமாறு <pre> டேகினுள் தரவும்.
<pre class='prettyprint'>
#author: Rajkumar Ravi
print 'hi blog readers...'
</pre>
ஒரு html நிரலை உங்கள் பதிவில் காட்டவேண்டுமென நினைக்கிறீர்கள். எடுத்துகாட்டாக கீழ்காணும் html வரிகளை <pre> </pre> டேகிற்குள் எழுதுகிறோம் என வைத்துக் கொள்ளுங்கள்.
<html>
<head>
<title>Display html in a HTML page</page>
</head>
<body>
Escape html tags you want to display it in a HTML page.
</body>
</html>
இவ்வரிகளை நாம் ஏற்கனவே எழுத்தப்பட்டிருக்கும் ஒரு html பக்கத்தில்தான் சேர்க்கிறோம் என்பதை மறந்து விடாதீர்கள்.நாம் <pre> டேகினுள் சேர்த்த html வரிகளை எழுத்தாக தோன்றச் செய்ய மட்டும் எண்ணியிருந்தாலும், உங்கள் உலாவி இதை html இலக்கணமாக எடுத்துக்கொள்வதால் சிக்கல் ஏற்படும்.
இதற்கு html மொழியிலேயே தீர்வு இருக்கிறது. அவைதான் html entities. < அனைத்து டேகிலும் வருவதால் அதை கட்டளை எழுத்தாக அல்லாமல் எழுத்தாக தோன்ற செய்வதற்கு < entityயாக எழுத வேண்டும். காப்புரிமை குறியீட்டிற்கு © என வரும். இப்படி htmlலில் பல entityக்கள் உள்ளது.
நாம் காட்ட நினைக்கும் html நிரலில் உள்ள அனைத்து குறியீட்டையும் ஒவ்வொன்றாக மாற்றிக் கொண்டிருக்க முடியாது. அதற்கு நிரல் மூலமாகவே தீர்வுகாண முடியும். இப்பிரச்சனைக்கு தீர்வுதரும் ஒரு நிரல்தான்
http://www.string-functions.com/htmlencode.aspx
கருத்துகள் இல்லை:
கருத்துரையிடுக