Html pre tagındaki kodları kod olarak görme

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Html pre tagındaki kodları kod olarak görme

Bu konudaki kullanıcılar: 1 misafir, 1 mobil kullanıcı

6
Cevap 503
Tıklama 0
Öne Çıkarma

1. sayfa

Html pre tagındaki kodları kod olarak görme

Cevap Yaz

webandyazilimprofesor

7 yıl

Yüzbaşı

Konu Sahibi

Merhaba,

arkadaşlar html'de pre tagını kod göstermek için kullanmayı düşünüyorum. Fakat bir html kodu yazdığınızda onu kod olarak görüp html kodu olarak çalıştırıyor.

Ben bunu engellemek istiyorum.

Bunu nasıl yapabilirim?

Yardımınıza ihtiyacım var.

< Bu mesaj bu kişi tarafından değiştirildi webandyazilimprofesor -- 19 Şubat 2018; 18:1:22 >

DoubleDragon

7 yıl

Yarbay

Aşağıdaki örneği inceleyin anlarsınız.

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>pre tagı arasına html kodları yazamak</title> 
 </head> 
  
 <body> 
 <h1>pre tagı arasına html kodları yazamak</h1> 
 <p>Bunun için özel html karakter setinden yararlanıyoruz.</p> 
  
 <pre> 
 &lt;html&gt; 
 &lt;head&gt; 
    &lt;title&gt;pre tagı&lt;/title&gt; 
 &lt;/head&gt; 
 &lt;body&gt; 
    &lt;div&gt; 
       &lt;h1&gt;Başlık&lt;/h1&gt; 
       &lt;p&gt;Mesela paragraf&lt;/p&gt; 
    &lt;/div&gt; 
 &lt;/body&gt; 
 &lt;/html&gt; 
 </pre> 
  
 <p>Şeklinde yazıyoruz. Kaynak kodunu inceleyin nasıl yapıldığını anlarsınız :)</p> 
 </body> 
  
 </html>

Bu mesaja 1 cevap geldi.

webandyazilimprofesor

7 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

Aşağıdaki örneği inceleyin anlarsınız.

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>pre tagı arasına html kodları yazamak</title> 
 </head> 
  
 <body> 
 <h1>pre tagı arasına html kodları yazamak</h1> 
 <p>Bunun için özel html karakter setinden yararlanıyoruz.</p> 
  
 <pre> 
 &lt;html&gt; 
 &lt;head&gt; 
    &lt;title&gt;pre tagı&lt;/title&gt; 
 &lt;/head&gt; 
 &lt;body&gt; 
    &lt;div&gt; 
       &lt;h1&gt;Başlık&lt;/h1&gt; 
       &lt;p&gt;Mesela paragraf&lt;/p&gt; 
    &lt;/div&gt; 
 &lt;/body&gt; 
 &lt;/html&gt; 
 </pre> 
  
 <p>Şeklinde yazıyoruz. Kaynak kodunu inceleyin nasıl yapıldığını anlarsınız :)</p> 
 </body> 
  
 </html>

Merhaba,

dediğinizi ararken başka bir yöntem buldum :

http://jsfiddle.net/kU8bV/20/

Bir textarea'mız var ve bir kod butonumuz :

<textarea id="textarea" name="dtext" cols="50" rows="10"></textarea>

<button onclick="formatText(document.getElementById('textarea'),'[code]',[code])">Kod</button>

formatText bir javascript fonksiyonu :

function formatText(el,tagstart,tagend) {

if (el.setSelectionRange) {

el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)

}

else {

// IE code here...

}

}

Birde bir gönder butonumuz var. Ona tıklayınca ise php'de şöyle bir kod :

$bbtext = filter_input(INPUT_POST, "dtext");

function showBBcodes($text) {

// BBcode array

$find = array(

'~\[b\](.*?)\[/b\]~s',

'~\[i\](.*?)\[/i\]~s',

'~\[u\](.*?)\[/u\]~s',

'~\[del\](.*?)\[/del\]~s',

'~\[a\](.*?)\[/a\]~s',

'~\[quote\](.*?)\[/quote\]~s',

'~\[size=(.*?)\](.*?)\[/size\]~s',

'~\(.*?)\[/color\]~s',

'~\[resim\](.*?)\[/resim\]~s',

'~\[font=(.*?)\](.*?)\[/font\]~s',

'~\[code\](.*?)\[/code\]~s',

);

// HTML tags to replace BBcode

$replace = array(

'<b>$1</b>',

'<i>$1</i>',

'<span style="text-decoration:underline;">$1</span>',

'<del>$1</del>',

'<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=131493113&url=$1" data-href="$1">$1</a>',

'<pre>$1</'.'pre>',

'<span style="font-size:$1px;">$2</span>',

'<span style="color:$1;">$2</span>',

'<img src="$1">',

'<span style="font-family:$1">$2</span>',

'<pre class="kod">$1</pre>',

);

// Replacing the BBcodes with corresponding HTML tags

$text = str_replace(['

', '[:|]', '

', '

'], ['<img src="gulme.jpg">', '<img src="utanma.png">', '<img src="kizma.jpg">', '<img src="havali.png">', '<img src="goz.jpg">'], $text);

return preg_replace($find,$replace,$text);

if(strstr($text, "<pre>")){

?>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">

var textvar = $('.kod').html();

$('.kod').text(textvar).html();

</script>

<?php

}

}

$htmltext = showBBcodes($bbtext);

echo $htmltext;

Kodu şöyle açıklayayım : bir arayanlar birde değiştirilecekler var (kod en altta) Birde sonra jsfiddle'daki js kodu.

Textarea'ya <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=131493113&url=google.com" data-href="google.com">ADRES</a> yazdım code bbcode'un içine. Ama maalesef sonuç pek iç açıcı değil (html kodu olarak görüyorum yani karşıma bir link çıktı)

Bu sorunu nasıl çözebilirim?

Yardımınıza ihtiyacım var.

< Bu ileti mobil sürüm kullanılarak atıldı > Bu mesaja 1 cevap geldi.

DoubleDragon

7 yıl

Yarbay

Ben sorduğunuz soruya bildiğim kadarıyla cevap yazdım. Başka bir yöntem buldum dediğiniz şeye baktım <pre> </pre> tagı arasında html, head ve body tagları bulunursa bunları göstermiyor. Diğer tagları gösteriyor.

Bundan sonraki yazdıklarınızdan hiç bir şey anlamadım.

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @webandyazilimprofesor

webandyazilimprofesor

7 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

Ben sorduğunuz soruya bildiğim kadarıyla cevap yazdım. Başka bir yöntem buldum dediğiniz şeye baktım <pre> </pre> tagı arasında html, head ve body tagları bulunursa bunları göstermiyor. Diğer tagları gösteriyor.

Bundan sonraki yazdıklarınızdan hiç bir şey anlamadım.

Merhaba,

ondan sonra projemi anlattım.

Textarea'nın ve kod butonunun kodlarını verdim. Ondan sonrada gönder butonuna tıklayınca bbcodeların nasıl html taglarına dönüştürdüğümü anlattım.

Projem ise textarea'daki metne özellik eklemek.

Umarım anlatabilmişimdir.

Yardımınıza ihtiyacım var.

DoubleDragon

7 yıl

Yarbay

Böylece daha önce sorduğun meseleye geldik. Bununla ilgili hazır editör kullanmanı tavsiye etmiştim. Ama görülüyor ki huylu huyundan vazgeçmiyor. Amerika'yı yeniden keşfetmeye bayılıyorsun.

Bu mesaja 1 cevap geldi.

webandyazilimprofesor

7 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

Böylece daha önce sorduğun meseleye geldik. Bununla ilgili hazır editör kullanmanı tavsiye etmiştim. Ama görülüyor ki huylu huyundan vazgeçmiyor. Amerika'yı yeniden keşfetmeye bayılıyorsun.

Peki teşekkür ederim

Aynen dediğin gibi huy bu kolay kolay vazgeçilmez.

< Bu ileti mobil sürüm kullanılarak atıldı >

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Html pre tagındaki kodları kod olarak görme