blackpic

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

32 پست در این موضوع قرار دارد

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

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

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

۱- 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

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

5

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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


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

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


.syntaxhighlighter

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


direction: ltr;

1

به اشتراک گذاری این پست


لینک به پست

ممنون

از مسیر زیر:

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رو باهم فعال کنم درست میشه.ولی من اینجوری دوست ندارم خیلی سنگین میشه.

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

ممنون

از مسیر زیر:

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
1

به اشتراک گذاری این پست


لینک به پست

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


.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;
}

0

به اشتراک گذاری این پست


لینک به پست

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


.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;
}

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

دانلود

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

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

4

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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

ویرایش شده در توسط Ghost
0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

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

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

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

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

ویرایش شده در توسط Ghost
0

به اشتراک گذاری این پست


لینک به پست

به تگ pre در استایلتون مقدار width ثابت بدید.

3

به اشتراک گذاری این پست


لینک به پست

دوست عزیز

این تگ pre کجاست دقیقا ؟ من پیداش نکردم

0

به اشتراک گذاری این پست


لینک به پست

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

pre { your elements here }

2

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

1

به اشتراک گذاری این پست


لینک به پست

سلام داداش تگ 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;}

0

به اشتراک گذاری این پست


لینک به پست

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

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

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

pgknltxwdqs2vwxznq6n.jpg

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

ویرایش شده در توسط Ghost
0

به اشتراک گذاری این پست


لینک به پست

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

overflow: scroll;

4

به اشتراک گذاری این پست


لینک به پست

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

67624259835753389507.png

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

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری