راهنمای بلاگ blog.ir

آموزش و راهنمای ساخت وبلاگ و نحوه ی وبلاگ نویسی حرفه ای در بلاگ بیان

راهنمای بلاگ blog.ir

آموزش و راهنمای ساخت وبلاگ و نحوه ی وبلاگ نویسی حرفه ای در بلاگ بیان

در این وبلاگ با آموزش ساخت وبلاگ در سرویس بلاگ بیان و آموزش نحوه استفاده از امکانات بلاگ بیان راهنمای تبدیل شدن به یک وبلاگ نویس حرفه ای را در اختیار شما قرار خواهیم داد تا با استفاده آسان از امکانات حرفه ای بتوانید حضور بهتری در فضای مجازی داشته باشید.

یکی از امکاناتی که در انتشار مطالب قابل استفاده است، درج کد (عموما برنامه نویسی) در مطالب است، مانند این:

#include <iostream>
using namespace std;
int main () {
  cout << "Hello World!";
  return 0;
}

روش درج کد

برای درج یک کد عمومی باید در ویرایش‌گر پیش فرض از لیست انتخاب شونده formats گزینه preformatted را انتخاب کنید.

دقت کنید کنید که متن شما در حال ویرایش رنگی نمی‌شود ولی در هنگام نمایش به صورت خودکار رنگی می‌شود.

در بقیه ویرایشگرها هم دکمه‌هایی شبیه به ویرایش‌گر پیش فرض برای انتخاب گزینه preformatted وجود دارد، این گزینه به سادتی متن را بین <pre> و </pre> قرار می‌دهد.

تنظیمات مربوط به رنگی کردن

همانطور که گفته شود زبان مربوط به رنگی کردن با حالت نیمه خودکار تغیین می‌شود، اما در صورت لزوم با تغییر class تگ <pre> می‌توانید، رفتار آنرا تغییر دهید.

  • class="noprettify" باعث می‌شود که متن رنگی نشود (البته هنوز در قاب مخصوص کد باقی ماند)
  • زبان‌های عمومی مثل c، cpp، csharp، java، php‌ و xml، html و ... به صورت اتوماتیک تشخیص داده می‌شوند. اما اگر قصد دارید از زبان‌های دیگر استفاده کنید و حالت اتوماتیک، زبان را به درستی تشخیص نمی‌دهد، برای مشخص کردن دقیق زبان می‌توانید از class="lang-js" استفاده کنید. زبان‌های مجاز فعلی عبارتند از: apollo، clj، css، go، hs، lisp، lua، ml، n، proto، scala، sql، tex، vb، vhdl، wiki، xq و yaml
  • در صورتیکه می‌خواهید کد css درج کنید، برای رنگی کردن درست کد، حتما class="lang-css" را اضافه کنید.
  • در صورتیکه می‌خواهید کنار هر خط، شماره خط نیز درج کنید، کلاس linenums را نیز اضافه کنید. در صورتیکه قسمتی از یک فایل را درج کرده‌اید و می‌خواهید شماره خطوطی از عددی غیر از ۱ (مثلا ۳۵) شروع شوند، کافیست به شکل linenums:35 از این امکان استفاده کنید.

درج کد کوتاه در بین متن

برای درج کدهای کوتاه در بین متن کافی است، آن را در بین <code> و </code> قرار دهید.

متاسفانه فعلا در ویرایشگر پیش‌فرض دکمه خاصی برای این کار وجود ندارد، به این ترتیب می‌توانید از طریق «ویرایش کد»، این تگ را به صورتی دستی وارد کنید، یا از دیگر ویرایشگرها استفاده کنید.

مطلب مورد نظر خود را نیافته‌اید؟

نظرات  (۱۹)

  • یوشا آل ایوب
  • سلام

    بهتره در کنار گزینه هایی که معرفی می کنید، آیکون/تصویر کوچیکی از اون گزینه رو قرار بدید.
    پاسخ:
    در مورد گذاشتن آیکون، به نظر به اندازه‌ی کافی گویا هست. (مخصوصا برای کسی که برنامه نویسی می‌کند).
    در مورد استفاده همزمان از <code>و <pre> باید گفت که استفاده از <code> داخل <pre> مجاز است و مشکلی ایجاد نمی‌کند، اما استفاده از <pre> داخل <code> از نظر استاندارد html کاملا نادرست است. (مثال و اشتباه بودن آن)
    کد سی‌شارپ پشتیبانی نمی‌شه؟!؟
    پاسخ:
    زبان‌های خانواده c و بسیاری دیگر از زبان‌ها که در متن اشاره نشده به صورت اتوماتیک تشخیص داده می‌شوند.
    با تشکر، متن اصلاح شد.
  • سجاد نجفی
  •  سلام
    شاید اینجا جای این سوال من نباشه ! شایدم فقط همین جا باید بپرسم! :
    این قسمت مالکیت معنوی و گزارش کپی برداری ها و تعریف عبارت الحاق به کپی برای چیه و کاربردش به زبان ساده چیه؟ممنون میشم راهنمایی کنید :)
    پاسخ:
    سلام
    برای اطلاع بیشتر در این زمینه به لینک ذیل مراجعه نمایید.
    http://help.blog.ir/post/copied-text-stat
  • محمد رعیت پیشه
  • امکان استفاده کردن از SyntaxHighlighter وجود نداره؟
    این افزونه خیلی جالبتره اگر امکان نصبش وجود داره ممنون میشم راهنمایی کنید.
    با روش فعلی مثلا امکان گذاشتن شماره خط وجود نداره و کدها به طور صحیح مشابه ویرایشگرهاشون رنگی نمی شوند.
    پاسخ:
    فعلا نه، افزونه جاری امکان شماره خط هم دارد که به توضیحات اضافه شد.
    ضمنا مهمترین ویژگی این افزونه، تشخیص خودکار زبان است، که در SyntaxHighlighter وجود ندارد. اگر کدهای شما به صورت صحیح رنگی نمی‌شوند، به این دلیل است (که احتمالا به خاطر کوچک بودن کد) زبان آن‌ها به درستی تشخیص داده نمی شود، بنابراین می‌توانید همانطور که در متن گفته شده است، زبان را به صورت صریح مشخص کنید.
    من چطوری میتونم آیکن پرداخت آنلاین زرین پال رو در پایان متنم قرار بدم؟؟
    پاسخ:
    کد مورد نظر شما باید در سایت زرین در دسترس باشد. کد مربوطه را پیدا کنید و در ویرایش قالب خود درج نمایید.
    مرسی :)
  • مهدی بردبار
  • سلام
    به نظر میرسه کد امبد فیلم توی بلاگ جواب نمیده من با دوتا مرورگر امتحان کردن نمایش داده نشد!!!
    همینطوره؟
    یا مشکل از جای دیگست؟
    پاسخ:
    سلام
    ممکن است در کدنوشت مورد نظر ار دستورات جاوااسکریپت استفاده شده باشد که برای استفاده از آن باید امکان آن را از بسته اختیاری خریداری نمایید.
  • مهدی بردبار
  • سلام مجدد
    کدش اینه من که چیزی از جاوا اسکریپت توش ندیدم
    <embed src="http://mostazafin.tv/components/com_dima_video/assets/player/kt_player.swf?video_url=http://mostazafin.tv/images/video/resize/low_quality34ezame-navgroh-be-atlas.flv&preview_url=http://mostazafin.tv/images/screenshot/17/sabalan2.jpg&skin=1&bt=3" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" height="270" width="480" />
    شما یه نگاهی به وبلاگ من بندازین شاید مشکلش رو فهمیدین
    http://emamkazem.blog.ir/
    تشکر
    پاسخ:
    سلام
    کدنوشتی که مرقوم نموده اید صحیح است اما کد مربوط به فیلمها که در وبلاگ خود قرار دادید غیرفعال اند در صورتیکه کد ارائه شده در منبع فیلمها صحیح است. از صحت کدهای موجود در وبلاگتان و انطباق آنها با کدنوشت موجود در منبع (سایت مستضعفین) اطمینان حاصل کنید.
  • مرتضی حیدری
  • این همش فارسیه...
    ببخشید format و pre کجا هستن؟ پیداشون نمیکنم :(
  • حسین سُرور گلشنی
  • آقا چطوری میشه کد ها رو با ScrollBar کرد؟ آخه در بعضی اوقات کد های خیلی خیلی طولانی هستند که نیاز به ScrollBar دارن وگرنه ظاهر سایت زشت میشه.
    بعد یه ویژگی Select All هم اضافه کنید که تا کاربر روی کد کلیک کرد همش کلیک بشه بتونه کپی کنه.
  • حسین سُرور گلشنی
  • یافتم از دوستان هر کی می خواست کدش ScrollBar داشته باشه به تگ <pre> یا <code> استایل height: 200px; overflow: auto; رو بدید.اون 200px هم می تونید دلخواه تغییر بدید.

    برای مثال:
    کد زیر هم می تونید تو مطلب http://etuts.blog.ir/post/5/ دربارش بخونید.

    بیان ازت می خوام لطفاً این نظر رو تایید کنی ممنون.
    0 + 0 = ? | 0
    0 + 1 = ? | 1
    0 + 2 = ? | 2
    0 + 3 = ? | 3
    0 + 4 = ? | 4
    0 + 5 = ? | 5
    0 + 6 = ? | 6
    0 + 7 = ? | 7
    0 + 8 = ? | 8
    0 + 9 = ? | 9
    1 + 0 = ? | 1
    1 + 1 = ? | 2
    1 + 2 = ? | 3
    1 + 3 = ? | 4
    1 + 4 = ? | 5
    1 + 5 = ? | 6
    1 + 6 = ? | 7
    1 + 7 = ? | 8
    1 + 8 = ? | 9
    1 + 9 = ? | 10
    2 + 0 = ? | 2
    2 + 1 = ? | 3
    2 + 2 = ? | 4
    2 + 3 = ? | 5
    2 + 4 = ? | 6
    2 + 5 = ? | 7
    2 + 6 = ? | 8
    2 + 7 = ? | 9
    2 + 8 = ? | 10
    2 + 9 = ? | 11
    3 + 0 = ? | 3
    3 + 1 = ? | 4
    3 + 2 = ? | 5
    3 + 3 = ? | 6
    3 + 4 = ? | 7
    3 + 5 = ? | 8
    3 + 6 = ? | 9
    3 + 7 = ? | 10
    3 + 8 = ? | 11
    3 + 9 = ? | 12
    4 + 0 = ? | 4
    4 + 1 = ? | 5
    4 + 2 = ? | 6
    4 + 3 = ? | 7
    4 + 4 = ? | 8
    4 + 5 = ? | 9
    4 + 6 = ? | 10
    4 + 7 = ? | 11
    4 + 8 = ? | 12
    4 + 9 = ? | 13
    5 + 0 = ? | 5
    5 + 1 = ? | 6
    5 + 2 = ? | 7
    5 + 3 = ? | 8
    5 + 4 = ? | 9
    5 + 5 = ? | 10
    5 + 6 = ? | 11
    5 + 7 = ? | 12
    5 + 8 = ? | 13
    5 + 9 = ? | 14
    6 + 0 = ? | 6
    6 + 1 = ? | 7
    6 + 2 = ? | 8
    6 + 3 = ? | 9
    6 + 4 = ? | 10
    6 + 5 = ? | 11
    6 + 6 = ? | 12
    6 + 7 = ? | 13
    6 + 8 = ? | 14
    6 + 9 = ? | 15
    7 + 0 = ? | 7
    7 + 1 = ? | 8
    7 + 2 = ? | 9
    7 + 3 = ? | 10
    7 + 4 = ? | 11
    7 + 5 = ? | 12
    7 + 6 = ? | 13
    7 + 7 = ? | 14
    7 + 8 = ? | 15
    7 + 9 = ? | 16
    8 + 0 = ? | 8
    8 + 1 = ? | 9
    8 + 2 = ? | 10
    8 + 3 = ? | 11
    8 + 4 = ? | 12
    8 + 5 = ? | 13
    8 + 6 = ? | 14
    8 + 7 = ? | 15
    8 + 8 = ? | 16
    8 + 9 = ? | 17
    9 + 0 = ? | 9
    9 + 1 = ? | 10
    9 + 2 = ? | 11
    9 + 3 = ? | 12
    9 + 4 = ? | 13
    9 + 5 = ? | 14
    9 + 6 = ? | 15
    9 + 7 = ? | 16
    9 + 8 = ? | 17
    9 + 9 = ? | 18
  • حسین سُرور گلشنی
  • چرا استایلی که به کد نظر بالا دادم حذف شده!
    از این کلاسی که گفتید (linenum) چه طوری باید استفاده کرد؟
    من بلد نیستم :)
    ممنون می شم اگه طرز قرار دادن scrollbar رو هم توضیح بدید
    چیزی که آقای حسین سرور گلشنی توضیح دادن فقط هنگام نوشتن مطلب کار می کنه و وقتی که مطلب رو انتشار می دیم، دیگه کار نمی کنه
    مرسی :)
  • نیکول سانا
  • سلام
    من میخام تو وبلاگم موسیقی بزارم چه جوری بزارم؟
    من برنامه نویسی نمیدونم
    توضیحاتتون مال ادمای که برنامه نویسی میدونن
    یه جوری بگی که منی که هیچی از برنامه نویسی نمیدونم هم استفاده کنم
    ممنون
    پاسخ:
    سلام
    لطفا از ارسال موارد نامرتبط ذیل مطالب خودداری نمایید.
    بدینمنظور باید پس از خرید امکان جاوااسکریپت کد مورد نظر را در قسمت ویرایش قالب فعلی درج نمایید.
    توضیح بیشتر در این زمینه مستلزم آموزش زبان های جاوا اسکریپت , CSS و HTML می باشد که طبیعتا نیازمند شرکت در دوره های آموزشی یا فراگیری از طریق کتاب های آموزشی است . در صورت آشنایی با این زبان ها , شما خواهید توانست از بخش « ویرایش ساختار قالب فعلی» و «ویرایش CSS قالب فعلی» در منوی «قالب» تغییرات مورد نظر خود را اعمال نمایید . در غیر این صورت می توانید از طریق افرادی که خدمات مربوط به ویرایش قالب را ارائه می دهند اقدام نمایید.
  • داریوش طوافی اسماعیلی
  • لطفا یک مثال بزنید برای قرار دادن
    <?php
    echo "Hello World";
    ?>
    توی قالب یا پست.
  • علی رضا آهنی
  • سلام.
    من کد زیر رو گذاشتم اما عمل نکرد که!
    <pre>/Blinking LED#include <avr/io.h>#include <util/delay.h>//wait for 1 secondvoid delay_1s(void){int i;for (i = 0; i < 100; i++)_delay_ms(10);}int main(void){//set DDRB.1 highDDRB |= 1<<1;while(1){//set PORTB.1 highPORTB |= 1<<1;//call delay1s() function.delay_1s();//set PORTB.1 lowPORTB &= ~(1<<1);//call delay1s() function.delay_1s();}return (0);}</pre>
  • علی رضا آهنی
  • سلام.
    کد بیسیک را پشتیبانی نمیکند!چه کنم؟
    پاسخ:
    سلام
    در صورتیکه پیغام خطای مورد نظر عدم پشتیبانی از این کد را بیان میکند امکان استفاده از آن وجود ندارد.
  • علی رضا آهنی
  • خیر فقط رنگی نمیشود .
    نمیدانم در راه حلی که در بالا درون مطلب گفتید چه بنویسم!

    ارسال نظر

    نظر دادن تنها برای اعضای بیان ممکن است.
    اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.