דצמ' 31 2009
כתיבת קוד מקור בWordPress עברי
קשה מאוד לכתוב קוד מקור בWordPress עברי. היישור ימינה מקשה מאוד על כתיבת קוד מיושר שמאלה. בנוסף, ברגע שעוברים מעורך הHTML לעורך הויזואלי, כל הרווחים והתווים המיוחדים נעלמים או נהרסים. אחרי מאבקים מתמשכים עם תוספי syntax highlight שונים, והתייעצות עם מאור מהבלוג אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס אני חושב שהגעתי לאיזושהי דרך עבודה פחות או יותר סבירה.
ישנם כמה תוספים שמבטיחים syntax highlighting אבל רובם מאכזבים במבחן התוצאה. התוסף הכי פחות לא סביר הוא בעיני CodeColorer. יש לו לכאורה גרסה עברית אבל היא לא עובדת כראוי ויש לתקן אותה באופן הבא:
אחרי התקנת התוסף, יש להכנס לעמוד העריכה שלו לשנות את הקבצים הבאים:
codecolorer/codecolorer.css:
יש להוסיף כיווניות משמאל לימין בכמה שורות. חפשו את השורות:
/* Layout */ .codecolorer { padding: 5px; text-align: left; } code.codecolorer { padding: 2px; } .codecolorer-container { margin-bottom: 10px; text-align: left; } | 1 2 3 4 |
והוסיפו להם את העיצוב direction:ltr. השורות צריכות להיראות עכשיו כך:
/* Layout */ .codecolorer { padding: 5px; text-align: left; direction:ltr; } code.codecolorer { padding: 2px; direction:ltr; } .codecolorer-container { margin-bottom: 10px; text-align: left; direction:ltr; } | 1 2 3 4 |
codecolorer-core.php:
במידה ותרצו להוסיף מספרי שורות לקוד, תתקלו בבעיה. המספרים יופיעו מצד ימין של הקוד. כדי לתקן זאת, נחליף בין העמודה הימנית והשמאלית של הטבלה שבה נמצא הקוד.
חפשו את השורות:
if ($options['line_numbers'] && !$options['inline']) { $table = '<table cellspacing="0" cellpadding="0"><tbody><tr><td '; if (is_feed()) { $table .= 'style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"'; } else { $table .= 'class="line-numbers"'; } $table .= '><div>'; for ($i = 0, $count = substr_count($result, '<br />') + 1; $i < $count; $i++) { $table .= ($i + $options['first_line']) . '<br />'; } $result = $table . '</div></td><td>' . $result . '</td></tr></tbody></table>'; } | 1 2 3 4 5 6 7 8 9 10 11 12 13 |
מהשורה
$result = $table . '</div></td><td>' . $result . '</td></tr></tbody></table>'; | 1 |
יש לחתוך (cut) את הביטוי <td>' . $result . '</td> ולהעתיק אותו למעלה לשורה
$table = '<table cellspacing="0" cellpadding="0"><tbody><tr><td '; | 1 |
מייד לאחר התג <tr>. הקוד אמור עכשיו להיראות כך:
if ($options['line_numbers'] && !$options['inline']) { $table = '<table cellspacing="0" cellpadding="0"><tbody><tr><td>' . $result . '</td><td '; if (is_feed()) { $table .= 'style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"'; } else { $table .= 'class="line-numbers"'; } $table .= '><div>'; for ($i = 0, $count = substr_count($result, '<br />') + 1; $i < $count; $i++) { $table .= ($i + $options['first_line']) . '<br />'; } $result = $table . '</div></td></tr></tbody></table>'; } | 1 2 3 4 5 6 7 8 9 10 11 12 13 |
כתיבת הפוסט:
כדאי מאוד לעבוד עד כמה שזה ניתן מעורך הHTML משום שכל מעבר לעורך הויזואלי משבש את הקוד. בנוסף, במקום בתגית cc, כדאי להשתמש עבור קטעי קוד בcce שמפחית חלק מהתופעות הללו. בקוד המשולב בתוך הטקסט שלכם (inline), כדאי להשתמש בתגית ccie במקום cci.
טיפ של מאור: לשמור כל הזמן את תוכן תיבת הטקסט בקובץ טקסט כך שניתן יהיה לשחזר את קטעי הקוד אם הם יהרסו.
הערה: השינויים הללו מתייחסים לגרסה 0.9.7 של התוסף.