הוספת קוד לפוסטים עם Windows Live Writer

17 ביולי 2012

no comments

הוספת קוד לפוסטיםאני נשאל פעמים רבות כיצד להוסיף קטעי קוד לפוסטים טכניים בעת שימוש ב- Windows Live Writer, באופן שהקוד יראה מעוצב, או לפחות קריא למשתמש.

בעבר, המלצתי על Copy Source as HTML, תוסף לגירסאות קודמות של Visual Studio שאפשר להעתיד קוד מעוצב מ- Visual Studio לתוך Windows Live Writer עם כל הגדרות העיצוב.

ב- Visual Studio 2010, בעת השימוש ב- Productivity Power Tools נוספה היכולת להעתיק ישירות מתוך Visual Studio קטעי קוד כ- HTML עם העיצוב, דבר שאפשר ליצור פוסטים טכניים יפים מאד כדוגמת הפוסט הזה.

הבעיות:

  • Productivity Power Tools הוא תוסף, וכתוסף הוא לא ניתן להתקנה על גירסאות Express של Visual Studio.
  • Productivity Power Tools הוא תוסף ל- Visual Studio 2010 ורוב הפיצ’רים שלו נכנסו ל- Visual Studio 2012, אבל העתקת הקוד כ- HTML עדיין לא. כך שאין פיתרון לנושא ב- Visual Studio 2012.
  • Productivity Power Tools הוא תוסף רק ל- Visual Studio ולפעמים נרצה להעתיק קוד ממקומות אחרים (קוד SQL, סקרפיט של PowerShell או קוד מתוך IDE אחר).

הפיתרון – תוסף ל- Windows Live Writer

ישנם לא מעט תוספים ל- Windows Live Writer, ביניהם לא מעט תוספים של קוד מעוצב. לכל אחד יתרונות וחסרונות כמו קלות השימוש, היכולת לערוך את הקוד לאחר הוספתו, כמות חוקי העיצוב שהתוסף מוסיף לקוד הפוסט ועוד.

<pre class="prettyprint">

  Code comes here...

</pre>

התוסף החביב עלי לאחרונה הוא Code Prettify for Windows Live Writer, המוסיף קטע קוד העטוף בתדית <pre> עם CSS Class בשם prettyprint, שניתן להגדיר עבורו עיצוב מתאים.

מדריך: איך להשתמש ב- Code Prettify for Windows Live Writer

1. ראשית, יש להתקין את התוסף על המחשב.

2. יש להוסיף הגדרות עיצוב עבור חוק העיצוב המתאים ל- CSS Class ששמו: prettyprint.

כדי לעשות זאת, יש להכנס לממשק הניהול של הבלוג, ותחת האיזור Global Settings, לבחור באפשרות Change How My Blog Looks.

הוספת קוד לפוסטים

במסך הגדרות העיצוב, יש לבחור בטאב ששמו Custom Styles, להכניס את סגנון העיצוב לחוק העיצוב הרלוונטי ל- Class ששמו prettyprint.

הוספת קוד לפוסטים

אני משתמש בהגדרות העיצוב הבאות, אותן יש להעתיק לשדה CSS Overrides וללחוץ Save:

.prettyprint
{
  font-family: Consolas, "Courier New", Verdana,sans-serif;
  padding-bottom: 4px;
  background-color: rgb(246, 246, 242);
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  border-top-color: #cbc8b9;
  border-right-color: #cbc8b9;
  border-bottom-color: #cbc8b9;
  border-left-color: #cbc8b9;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: dotted;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-left-style: dotted;
}

ניתן לראות איך יראה קוד בפוסט שבו נעשה שימוש בתוסף הזה. שימו לב שהקוד אינו צבוע לפי שפה כלשהי אבל הוא ברור מאד וניתן להעתקה בקלות.

3. כדי להוסיף קוד לפוסט, נעתיק ל- Clip Board את קטע הקוד שנרצה לשלב בפוסט. למשל – העתיקו את קטע הקוד של הגדרות ה- CSS הנ”ל.

כעת, במקום המתאים בפוסט, נפעיל מתוך סרגל הכלים את התוסף Code Prettify Plugin.

הוספת קוד לפוסטים

התוסף יוסיף את הקוד בצורה הבאה לתוך הפוסט:

.prettyprint
{
  font-family: Consolas, "Courier New", Verdana,sans-serif;
  padding-bottom: 4px;
  background-color: rgb(246, 246, 242);
  ...
}

4. הדבר היחיד הוא נושא כיוון הטקסט. במידה ואתם כותבים פוסט בעברית, הכי שבסוף כתיבת הפוסט אתם עוטפים את הפוסט שלכם בתגית div המשנה את כיווניות טקסט שיהיה מימין לשמאל:

<div align=right dir=rtl>

  תוכן הפוסט מופיע כאן...

</div>

במקרה כזה, עליכם לדאוג שקטע הקוד הוא משמאל לימין. כדי לגרום לזה לקרות, יש להכנס לתצוגת קוד המקור של הפוסט.

הוספת קוד לפוסטים

בעורך ה- HTML של הפוסט, יש לאתר את קטעי הקוד שהכניס תוסף ה- Prettyify.

הוספת קוד לפוסטים

כפי שציינתי קודם, הקוד המצורף עטוף בתגית pre. כדי לשנות את הכיווניות משמאל לימין, עלינו לעטוף את בלוק ה- pre בתגית div מתאימה:

<div align=left dir=ltr>

  <pre class="prettyprint">
    Code comes here...
  </pre>

</div>

לדוגמא:

הוספת קוד לפוסטים

בהצלחה!

Add comment
facebook linkedin twitter email