• 1 رای - 2 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
نمایش کدهای جاوا در سایت آموزشی
#1
بسم الله

سلام

می خوام کدهای جاوا رو در سایت html نمایش بدم؛ مثل سایت های آموزشی؛ شبیه این باشه :

[عکس: code-viewer.jpg]

حتما شماره خط داشته باشه، زمینه سفید و کدهارو ترجیحا رنگی نشون بده (اگه تک رنگ هم باشه یه کاریش می کنم).

با تشکر
  پاسخ
تشکر شده توسط :
#2
سلام
به دنبال syntax highlighter بگردید.
خودتون هم میتونید بنویسید، رویه کار به این صورته:
1. یه تکست باکس برای گرفتن کد در نظر بگیرید، که با هر بار زدن یک دکمه فراخوانی بشه،
2. کد رو وارد این تکست باکس کنید، و با زدن تایید هم کد رو داخل تگ <pre> قرار داده و وارد مطلبتون بشه،
3. در دیتابیس به همراه مطلب ذخیره کنید.
4. هنگام نمایش هم تگ‌های <pre> رو باید جایگزین کنید،
5. هر شکستن خط رو پیدا کردید، بریزید داخل یک آرایه،
6. در نهایت هر خط رو در قالب مورد نظرتون خواهید داشت.
مثال:
کد پی‌اچ‌پی:
<?php
$pre 
'class Car {
    function getName() {
        echo \'BMW\';
    }
}
 
$car = new Car;
$car->getName();'
;

$lines explode(PHP_EOL$pre);

foreach (
$lines as $lineNumber => $line) {
  echo 
$lineNumber '. ' $line '<br>';


حالا اینو می تونید به شکل table بنویسید که قشنگتر باشه، برای رنگی کردن هم باید یه تم (theme) در نظر بگیرید و داخل با توجه به سینتکس زبان، برای هر کلمه کلیدی یک رنگ تعریف کنید و دوباره هر کلمه رو با یک <span> جدا کنید که کلاس این span نوع کلمه کلیدی و بالطبع رنگ تعریف شده و مورد نظر شماست.

در مورد مثال یک نکته رو فراموش کردم: توجه کنید که شماره خط ها از 0 شروع میشه که می‌تونید یکی بهش اضافه کنید.

موفق باشید.
  پاسخ
تشکر شده توسط : soheyl_ir89 ayoubsys
#3
تصمیم عوض شد و یه قالب وردپرس طراحی کردم
و افزونه ی https://wordpress.org/plugins/mivhak/ رو نصب کردم
که در پوسته های پیش فرض وردپرس، وقتی کدهارو در نوشته ها با این افزونه می ذارم، کاملا درست نمایش می ده در قالب افزونه؛
اما
در قالبی که طراحی کردم، دور کدها یه border ساده نمایش می ده و کدها به رنگ مشکی و راست چین هستن!
دلیلش چیه؟

کد:
            <?php the_content();?>
  پاسخ
تشکر شده توسط :
#4
نمی‌دونم ساختار اون پلاگین چجوریه، احتمالا کدهای css شما یکجا بازنویسی میشن، باید اولویت اونا بیشتر بشه یا اولویت کدهای شما کمتر،
کد پی‌اچ‌پی:
<?php wp_head(); ?>
خط بالا رو ببرید دقیقا بالای تگ <head> و هیچی بینشون نذارید،
راه حل دوم، باید ببینید مثلا اگه با تیبل نشون میده cssهای تیبل‌ها رو عوض کنید.
توجه: تا حد امکان از !important در انتهای دستورات css استفاده نکنید.

در این مواقع برای سریعتر به نتیجه رسیدن، بهتره دو خط کد تست بنویسید و خروجی رو اینجا به همراه عکس قرار بدید (در محیط لوکال)، یا لینک بدید.
موفق باشید.
  پاسخ
تشکر شده توسط : soheyl_ir89
#5
(۱۳۹۶ بهمن ۱۳, ۱۱:۱۰ ب.ظ)Version نوشته: نمی‌دونم ساختار اون پلاگین چجوریه، احتمالا کدهای css شما یکجا بازنویسی میشن، باید اولویت اونا بیشتر بشه یا اولویت کدهای شما کمتر،
کد پی‌اچ‌پی:
<?php wp_head(); ?>
خط بالا رو ببرید دقیقا بالای تگ <head> و هیچی بینشون نذارید،
راه حل دوم، باید ببینید مثلا اگه با تیبل نشون میده cssهای تیبل‌ها رو عوض کنید.
توجه: تا حد امکان از !important در انتهای دستورات css استفاده نکنید.

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

خیلی ممنونم
لطف کردی
Heart

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

نشد!

الان در ایندکس و سینگل، داره css هارو از header.php می خونه و java هارو از footer.php ؛
ابتدا و انتها این کدهارو گذاشتم :
کد:
<?php include("header.php"); ?>

کد:
<?php include("footer.php"); ?>

این کد رو یه جا گذاشتم
کد:
<?php wp_head(); ?>
که یادم نیست کجا و افزونه رو به درستی نشون داد، اما بقیه ی css ها به هم ریخت Huh

کدهای header.php
کد پی‌اچ‌پی:
<html lang="fa">
<
head>
    <
meta charset="utf-8">
    <
meta http-equiv="X-UA-Compatible" content="IE=edge">
    <
meta name="viewport" content="wpIdth=device-wpIdth, initial-scale=1">
    <
title><?php bloginfo('name'); ?>؛ <?php bloginfo('description'); ?></title>

    <link href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap-rtl.css" rel="stylesheet">
    <link href="<?php bloginfo('stylesheet_directory'); ?>/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="<?php bloginfo('stylesheet_directory'); ?>/style.css" rel="stylesheet">

</head>

<body> 

این کدهای single که خودم نوشتم :
کد پی‌اچ‌پی:
<?php include("header.php"); ?>

<div class="container">

    <div class="row">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>    
          <div class="col-md-12">
            <div class="thumbnail">
                  <img src="<?php bloginfo('stylesheet_directory'); ?>\image.png" height="120px" width="120px">
                  <center><h1 class="post-title"><?php the_title();?></h1></center>
                  <?php the_content();?>
                  <div class="caption">
                    <div class="pull-right"><i class="fa fa-bars"></i> <?php the_category(' '); ?></div>
                    <br>
                  </div>
            </div>
          </div>
          <?php endwhile; ?>
        <?php endif; ?>
    </div>

</div>

<?php include("footer.php"); ?>
حالا کدهای ابتدا و انتها رو تغییر دادم :
کد پی‌اچ‌پی:
<?php wp_head(); ?>

<div class="container">

    <div class="row">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>    
          <div class="col-md-12">
            <div class="thumbnail">
                  <img src="<?php bloginfo('stylesheet_directory'); ?>\image.png" height="120px" width="120px">
                  <center><h1 class="post-title"><?php the_title();?></h1></center>
                  <?php the_content();?>
                  <div class="caption">
                    <div class="pull-right"><i class="fa fa-bars"></i> <?php the_category(' '); ?></div>
                    <br>
                  </div>
            </div>
          </div>
          <?php endwhile; ?>
        <?php endif; ?>
    </div>

</div>

<?php wp_footer(); ?>

با کدهای اول، css های قالب رو به درستی نشون می ده اما افزونه ی نمایش کدها در مطلب رو درست نشون نمیده،
و با کدهای دوم، افزونه رو درست نشون می ده اما قالب به هم می ریزه!

دلیلش چیه؟ Huh

وقتی از این کدها در ابتدا و انتهای سینگل و ایندکس استفاده می کنم، css قالب رو درست نشون می ده، اما افزونه رو نه :
کد:
<?php get_header() ?>

<?php get_footer() ?>
و وقتی از این کدها، افزونه رو نشون میده، اما css هارو نه!
کد:
<?php wp_head(); ?>


<?php wp_footer(); ?>
  پاسخ
تشکر شده توسط :
#6
درست شد Wink
ابتدا و انتهای سینگل و ایندکس، این کدهارو گذاشتم تا هم css و جاوای قالب رو درست نشون بده، هم افزونه رو :

کد پی‌اچ‌پی:
<?php wp_head(); ?>
<?php get_header
() ?>


<?php wp_footer(); ?>
<?php get_footer
() ?>
  پاسخ
تشکر شده توسط :
#7
درست منظورتو متوجه نشدم اما اگه میخوای code view داخل سایتت نشون بدی به این صورت میتونی کار کنی و سورستم خیلی کمتر میشه:
کد پی‌اچ‌پی:
<code>
*/<?
php     my php code ؟>/*
</code> 

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

فقط کافیه قبل وارد کردن کد php اونو کامنت کنی
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان