رفتن به مطلب

۶ پلاگین برای نمایش کد در نوشته ها


blackpic

پست های پیشنهاد شده

------- شرمنده کپی پیست از خوده سایت -----------

------------------------------------------------

امروزه بسیاری از وب سایت ابزار وبلاگنویسی اگر بخوهند کد های سی اس اس و اچ تی ام ال و … را بخواهند برای کاربران خود به نمایش بگذارند با مشکل رو برو میشوند و همچنین موقع نمایش کد در نوشته به صورت نامرتب و گنگ کد ها قرار می گیرد. امروز ۶ پلاگین برای نمایش کدها برای شما قرار دادیم امیدواریم که لذت ببرید.

۱- SyntaxHighlighter Evolved

این پلاگین یکی از محبوب ترین و پر کاربرد ترین پلاگین ها برای نمایش کد هست

از قابلیت های مهم این پلاگین داشتن دکمه های کپی ، چاپ و … می باشد

syntax-highlighter-plugin1.jpg

۲٫ File Inliner Plugin

file-inliner-wp-plugin1.jpg

۳٫ WP-SynHighlight

WP-SynHighlight-plugin1.jpg

۴٫ FV Code Highlighter.

FV-code-highlighter-plugin1.jpg

۵٫ Google Syntax Highlighter

google-syntax-highlighter-plugin1.jpg

۶٫ CodeColorer

CodeColorer-wp-plugin1.jpg

لینک سایت مرجع : آوا دانلود

لینک به ارسال
  • 1 ماه بعد...

سلام دوستان من امروز افزونه syntaxhighlighter رو نصبیدم اما کد ها رو فقط در پوسته های graphene و twenity eleven درست نشون میده و در قالب خودم alltuts و چند قالب دیگه کدها بدون هیچ گونه استایلی راست چین میشن.

کسی نمی دونه مشکلش چیه؟

لینک به ارسال

افزونه ایی که توی همین تاپیک معرفی شده رو نصب کردید؟

لینک به ارسال

آره مرتضی جان من همیشه افزونه ها و پوسته ها و همه چی رو اول روی لوکال تست می کنم. syntaxhighlighter رو روی لوکال هاست نصب کردم اما همونطور که عرض کردم کد های توی نوشته ها رو با پوسته های graphene و twenity eleven درست نشون میده و با قالب alltuts کدها راست چین میشه

لینک به ارسال

میتونید تو استایل افزونه برید و دایرکشن ltr بدید فایل css shThemeDefault.css رو باز کنید طبق مسیر :


wp-content/plugins/syntax-highlighter/2.1.364/css/shThemeDefault.css

کد زیر رو پیدا کنید :


.syntaxhighlighter

بهش کد زیر رو اضافه کنید :


direction: ltr;

لینک به ارسال

ممنون

از مسیر زیر:

C:\wamp\www\wp\wp-content\plugins\syntaxhighlighter\syntaxhighlighter2\styles

کد بالا رو به فایل shThemeDefault.css اضافه کردم. ولی درست نشد


* Interface elements.
************************************/
.syntaxhighlighter
{
background-color: #fff !important;
border: 1px solid #E0E0E0 !important;
padding: 0 !important;
direction: rtl
}

داداش اگه افزونه های SyntaxHighlighter Evolved و WP SyntaxHighlighterرو باهم فعال کنم درست میشه.ولی من اینجوری دوست ندارم خیلی سنگین میشه.

لینک به ارسال

ممنون

از مسیر زیر:

C:\wamp\www\wp\wp-content\plugins\syntaxhighlighter\syntaxhighlighter2\styles

کد بالا رو به فایل shThemeDefault.css اضافه کردم. ولی درست نشد


* Interface elements.
************************************/
.syntaxhighlighter
{
background-color: #fff !important;
border: 1px solid #E0E0E0 !important;
padding: 0 !important;
direction: rtl
}

داداش اگه افزونه های SyntaxHighlighter Evolved و WP SyntaxHighlighterرو باهم فعال کنم درست میشه.ولی من اینجوری دوست ندارم خیلی سنگین میشه.

من عرض کردم ltr شما به کدتون نگاه کنید نوشتید


direction: rtl;

ویرایش شده توسط progpars
لینک به ارسال

داداش گلم هردوتاشو تست کردم .اشتباه تایپی بود.ببخشید


.syntaxhighlighter
{
background-color: #fff !important;
border: 1px solid #E0E0E0 !important;
padding: 0 !important;
direction: ltr;
}


.syntaxhighlighter
{
background-color: #fff !important;
border: 1px solid #E0E0E0 !important;
padding: 0 !important;
direction: ltr !important;
}

لینک به ارسال

داداش گلم هردوتاشو تست کردم .اشتباه تایپی بود.ببخشید


.syntaxhighlighter
{
background-color: #fff !important;
border: 1px solid #E0E0E0 !important;
padding: 0 !important;
direction: ltr;
}


.syntaxhighlighter
{
background-color: #fff !important;
border: 1px solid #E0E0E0 !important;
padding: 0 !important;
direction: ltr !important;
}

پس لطف کنید آدرس سایتتون رو بدید من چک کنم .

لینک به ارسال

دوست عزیز عرض کرم که روی لوکال نصب کردم.

یک مطلب جدید آماده کردم .منتظرم این افزونه سر عقل بیاد

اینم آدرس سایت

لینک به ارسال

دوست عزیز عرض کرم که روی لوکال نصب کردم.

یک مطلب جدید آماده کردم .منتظرم این افزونه سر عقل بیاد

اینم آدرس سایت

بفرمایید افزونه رو براتون آپلود کردم و میتونید بدون مشکل استفاده کنید : (افزونه های قبلی رو پاک کنید)

دانلود

فقط بعد از فعال سازی افزونه به تنظیماتش برید چک کنید طبق عکس زیر باشه :

post-193-0-91463400-1338447270_thumb.gif

لینک به ارسال

خیلی ممنون .دمت گرم درست شد. :)

ای کاش میشد از پست ها بیشتر از یکبار تشکر کرد.

رفتیم واسه نصب و فرستادن پست جدید

ویرایش شده توسط Ghost
لینک به ارسال
  • 1 ماه بعد...

سلام . دوستان ببخشید یک مشکل دیگه .

تو قالب جدیدم عرض کد ها از عرض پست باکس بیشتره.چرا؟

ضمنا همون مشکل اول ( استایل راست چین) رو با قالب جدیدم دارم

اینجا رو ببینید

چجوری درستش کنم.

لینک به ارسال

سلام . دوستان ببخشید یک مشکل دیگه .

تو قالب جدیدم عرض کد ها از عرض پست باکس بیشتره.چرا؟

ضمنا همون مشکل اول ( استایل راست چین) رو با قالب جدیدم دارم

اینجا رو ببینید

چجوری درستش کنم.

اگر از افزونه گزینش SyntaxHighlighter Evolvedاستفاده میکنید. گزینه Wrap long lines (v2.x only, disabling this will make a scrollbar show instead) باید فعال باشه در تنظیمات

لینک به ارسال

جواب منفیه دوست من. از افزونه http://wordpress.org...ax-highlighter/ که جناب progpars ویرایش کردن استفاده می کنم.

ویرایش شده توسط Ghost
لینک به ارسال

در استایل قالبتون به دنبال عبارت pre باشید به این صورت تعریف میشه :

pre { your elements here }

لینک به ارسال

ممنون بخاطر این آموزش جامع و گام به گام

داداش خب بیشتر توضیح بده میای یک کلام می گی و میری

لینک به ارسال

والا ساده تر از این نمیشد گفتش

عرض ( width ) رو یک عدد قابت در این تگ بدین منظور دراستایل قالب هست

اگر موجود نبود خودتون بسازیدش !!!!

لینک به ارسال

سلام داداش تگ pre رو به استایل اضافه کردم ولی مشکل حل نشد

A {TEXT-DECORATION: none;}

img{border:none;}

span.a{color:#066496;font-size:8pt;font-weight:bold;}

body{font-family:Tahoma;margin:-10;background:#484848 url('images/bg.jpg') repeat-x top;}

.main{width:939;background:url('images/bg-p.jpg') repeat-x top;float:right;}

.viz{display:ok}

.top{width:970;float:right;background:url('images/top.jpg') no-repeat top left;height:223;text-align:right;overflow:hidden}

.topm{width:930;float:right;background:url('images/topbg.gif') repeat-x top;height:25;font-size:10pt;font-weight:bold;margin:-1 30 0 0}

.topm a{font-weight:bold;color:#ffffff;padding:0 10 0 0;float:right}

.topm a:hover{font-weight:bold;color:#f6e918}

h1 {

font-size:13px;

font-weight:bold;

margin:0px -3 0px;

}

h3 {

font-size:13px;

font-weight:bold;

margin:0px -3 0px;

}

.yektab img{

margin: 37px 600px 0px 0px;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

}

.yektab img:hover{

-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);

}

.amir

{

font-family:Tahoma, aryal, sans-serif;

font-size:11px;

font-weight:bold;

color:#383737;

text-align:center;

margin-left:2px;

margin-right:6px;

margin-top:9px;

text-decoration:none;

text-transform:none;

padding:3px 3px 3px 3px;

-moz-transform: translate(4);

background-color:#FF9900;

margin-left:7px;

margin-right:7px;

margin-top:4px;

-moz-border-radius:13px 0px 13px 0px;

-moz-transition: 300ms ease-in;

-moz-transform: translate(4);

}

.amir:hover

{

font-family:Tahoma, aryal, sans-serif;

font-size:11px;

font-weight:bold;

color:#383737;

text-align:center;

text-decoration:none;

text-transform:none;

padding:3px 3px 3px 3px;

-moz-transform: translate(4);

background-color:#ffffff;

margin-left:7px;

margin-right:7px;

margin-top:4px;

-moz-border-radius:0px 13px 0px 13px;

-moz-transition: 300ms ease-in;

-moz-transform: translate(4);

text-shadow:1px 1px 1px #ccc;}

.meloodiuos a

{

font-family:Tahoma, aryal, sans-serif;

font-size:11px;

color:#383737;

}

.pre{width:511}

.topm-pad{float:right;width:1000;height:195}

.menu{width:207;float:right;direction:rtl;text-align:right;}

.menupad{padding:15 7 0 0;}

#menu1{width:194;float:right;}

.tmenu{width:194;float:right;background:url('images/m1.gif') no-repeat top right;height:57;font-size:9pt;color:#eaeaea;font-weight:bold;}

.tmenu1{padding:12 60 0 0}

.xmenu{width:194;float:right;background:url('images/m2.gif') repeat-y right;font-size:9pt;color:#fc9800;display:block}

.xxmenu{padding:0 10 5 5}

.xmenu a{color:#e1e1e1;}

.xmenu a:hover{color:#f2ab29}

.bmenu{width:194;background:url('images/m3.gif') no-repeat top right;height:25;float:right}

.linkduni{width:510;float:right;height:190;font-size:9pt;color:#222222;background:url('images/l2.jpg') repeat-x top;}

.linkduni1{background:url('images/l3.jpg') no-repeat top right;width:510;float:right;height:174;}

.linkduni2{background:url('images/l1.jpg') no-repeat top left;width:510;float:right;height:174;}

.linkduni3{padding:20 10 0 10;}

.linkduni-txt{width:220;float:right;height:150}

.linkduni a{color:#ffffff}

.title{text-align:center;width:490;float:right;background:#333333;margin:10 10 30 10}

.title2{padding-top:2;}

h2.pagetitle{color:#e1e1e1;font-size:11pt;font-wight:bold}

#recentcomments a{color:#ffffff}

.post{width:520;float:right;direction:rtl;text-align:right;overflow:hidden}

.postpad{padding:15 5 0 0;}

.tpost{width:511;float:right;background:url('images/p1.gif') no-repeat top right;height:46;color:#4a4a4a;font-weight:bold;}

.tpost a{color:#4a4a4a}

.rpost{width:511;float:right;background:url('images/p4.gif') no-repeat top right;height:46;color:#4a4a4a;font-weight:bold;}

.tpost1{float:right;margin:15 55 0 20;font-size:10pt;}

.xpost{width:511;float:right;background:url('images/p2.gif') repeat-y right;color:#333333;font-size:9pt;line-height:130%;}

.xxpost{margin:5 10 10 10}

.xpost a{color:#df4b02}

.xpost a:hover{color:#000000}

.bpost{width:511;float:right;background:url('images/p3.gif') no-repeat top right;color:#e1e1e1;height:60;font-size:8pt;text-align:right}

.bpost2{width:511;float:right;background:url('images/pp3.gif') no-repeat top right;color:#e1e1e1;height:60;font-size:8pt;text-align:right}

.bpost3{width:511;float:right;background:url('images/pp4.gif') no-repeat top right;color:#e1e1e1;height:50;font-size:8pt;text-align:right}

.date{float:right;padding:10 0 0 0;width:300;}

.date2{float:right;padding:10 60 0 0;width:300;}

.date a{color:#ffffff;}

.edame{float:right;width:180;}

.edame2{padding:3 20 0 0;}

.pagenavi{width:510;float:right;font-size:9pt;color:#ffffff;direction:rtl;height:50}

.pagenavi a{color:#ffffff;}

.nav-r{float:right;width:150;text-align:right}

.nav-l{float:right;width:360;text-align:left}

.sch{background:none;float:right;width:30;height:20;cursor:pointer;border:0}

.txtsch{text-align:right;font-size:9pt;color:#ffffff;background:none;width:150;height:20;border:0}

.ads{width:200;height:250;border:1px solid #333333;float:right;text-align:center;margin-bottom:20;}

.ads2{padding:5}

.ft{width:970;background:url('images/ft.gif') no-repeat top right;height:34;color:#333333;font-size:8pt;direction:rtl;float:right}

.ft-pad{padding-top:10}

.ft a{color:#c94903}

#menu1 ul{padding:0;margin-right:0}

#menu1 li{padding:3 15 5 0;background:url('images/dot.gif') 170px 7px no-repeat;list-style:none}

#wp-calendar{font-size:9pt}

.titr2{width:240;font-size:9pt;font-weight: bold;color:#FFFFFF;text-align:right}

#comments{padding:10;float:right;text-align:right;direction:rtl;font-size:9pt;}

.comment-body a{color:#000000}

.commentmetadata {font-size:8pt;color:#333333}

.commentmetadata a{font-size:8pt;color:#7B801C}

label{color:#e1e1e1;font-size:9pt;font-family:tahoma}

/* Comments */

#comments{

width:100%;

margin:10px auto;

color:#333333;

padding-bottom:5px;

overflow:hidden;

}

a{color:#e1e1e1;}

h2#respond{

font-size:13px;

color:#ffffff;

padding:0 10px;

margin-top:30px;

}

.commentlist{margin:0; padding:0; list-style-type:none;}

.comment-author-admin cite.fn{color:#0066CC;}

a.url{color:#333333;}

cite.fn{font-style:normal; font-weight:bold;}

.comment{

background-color:#ffffff;

border:1px solid #999999;

padding:5px;

margin:5px 10px;

overflow:hidden;

}

.alt{background-color:#ececec;}

.author b{color:#990000;}

.avatar{float:right; padding:2px; margin-right:0px; margin-left:6px; border: 1px solid #eee; }

#comments input, #comments textarea{

margin:1px 5px;

padding:1px;

}

h2#comments{color:#0066BB;background:#ffffff}

form#searchform{margin:0;padding:0;}

لینک به ارسال

اینی که شما اضافه کردین کلاس هست نه تگ

اون دات اولش رو برداید همون نقطه اولش

لینک به ارسال

سلام ببین داداش تگ pre رو هم به استایل اضافه کردم .بعدش افزونه رو ریموو کردم و نسخه syntax evolved رو نصب کردم.اما مشکل همونه

توی قالب alltuts مشکلی نداره ها . ببین

pgknltxwdqs2vwxznq6n.jpg

چطور می تونم امکان اسکرول کد ها رو به قالبم اضافه کنم.

ویرایش شده توسط Ghost
لینک به ارسال

برای اسکرول دادن یک بخش این کد رو به استایلش اضافه کنید:

overflow: scroll;

لینک به ارسال

اخوی کدرو گذاشتم داخل postbox ولی تمام پست ها اسکرولی شدن :D

67624259835753389507.png

در صورتی که من میخوام فقط به کد ها و افزونه syntax highlighter اسکرول بدم.

شما توی انجمن از چه افزونه ای برای درج کدها استفاده می کنید ؟

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...