HTML + JavaScript Kod uygulaması nasıl yapabilirim?

Alerantt

Alerantt

Üye
2 Nis 2022
157
61
39.790038,39.476472
Hepinize merhaba arkadaşlar, Yazılımdan anlayan arkadaşlar bana yardımcı olabilirse çok sevinirim.
⟩ Şimdi benim bir projem var. Bu projemde kod editörlerindeki sistemi Web sitesinde nasıl yapabilirim? Mesela;
»» <p> Hello World </p> ««
<Textarea> ile kullandığımızda kod yazılır. Ben bu kodun renkli olmasını istiyorum. Yani kişi gelip kod üzerinde değişiklik yapabilecek ve yapsa bile aynı şekilde renkli renkli yazacak. Buna en iyi örnek verebileceğim site ``codepen.io``.

⟩ Aşağıdaki bağlantıdan ise kod editörüne iyice bakın. Kodlar üzerinde oynama yapabiliyorum. Aynı HTML editörleri gibi. Bu böyle bir sitemi sitemde kullanmak istiyorum. W3Schools online HTML editor

⟩ Kısaca kod editörü gibi bişey yapmak istiyorum. Nasıl yapabilirim?

(?) Kullanmam gereken <tag>'lar neler?
(?) JavaScript sistemi nasıl olmalı? = Kaynak verebilirsiniz...
 
Son düzenleme:
Tarihe göre sırala Oylara göre sırala
F

freebsd

Yeni üye
24 Nis 2020
31
5
selam,

ilk önce html-css ve javascript'i daha iyi kavrıyor olman gerekiyor. çünkü renk renk yapman için bunu tamamiyle belirtmen gerekiyor. ama aşağıdaki gibi basit bir örnekte yapabilirsin kendine.


ayrıca html-css js-es6 ve vue öğrenirsen bunu anlık olarak yapabilirsin, aşağıdaki videoyu izleyip neden bunları öğrenmen gerektiğini anlayabilirsin.

video'nun 7. dakika 15. saniyesine bakmanı öneririm demek istediğimi anlayacaksın!

 
Oyla 0 Downvote
L0HXT

L0HXT

Üye
5 Eyl 2021
186
44
24
Alerantt' Alıntı:
Hepinize merhaba arkadaşlar, Yazılımdan anlayan arkadaşlar bana yardımcı olabilirse çok sevinirim.
⟩ Şimdi benim bir projem var. Bu projemde kod editörlerindeki sistemi Web sitesinde nasıl yapabilirim? Mesela;
»» <p> Hello World </p> ««
<Textarea> ile kullandığımızda kod yazılır. Ben bu kodun renkli olmasını istiyorum. Yani kişi gelip kod üzerinde değişiklik yapabilecek ve yapsa bile aynı şekilde renkli renkli yazacak. Buna en iyi örnek verebileceğim site ``codepen.io``.

⟩ Aşağıdaki bağlantıdan ise kod editörüne iyice bakın. Kodlar üzerinde oynama yapabiliyorum. Aynı HTML editörleri gibi. Bu böyle bir sitemi sitemde kullanmak istiyorum. W3Schools online HTML editor

⟩ Kısaca kod editörü gibi bişey yapmak istiyorum. Nasıl yapabilirim?

(?) Kullanmam gereken <tag>'lar neler?
(?) JavaScript sistemi nasıl olmalı? = Kaynak verebilirsiniz...
Genişletmek için tıkla ...
HTML:
<html>
<head>
<title>Kodumun Editoru</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="style.css" />
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}

.dark-mode {
background-color: violet;
color: white;
}
</style>


</head>

<body>

<textarea id="html" placeholder="HTML"></textarea>
<textarea id="css" placeholder="CSS"></textarea>
<textarea id="js" placeholder="JavaScript"></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="app.js"></script>
<button onclick="myFunction()">Renk butonu</button>



<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>



</body>
</html>


JavaScript:
function compile() {
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;

document.body.onkeyup = function() {
code.open();
code.writeln(
html.value +
"<style>" +
css.value +
"</style>" +
"<script>" +
js.value +
"</script>"
);
code.close();
};
}
compile();


CSS:
body {
text-align: center;
}

textarea {
width: 32%;
float: top;
min-height: 250px;
overflow: scroll;
margin: auto;
display: inline-block;
background: #f4f4f9;
outline: none;
font-family: Courier, sans-serif;
font-size: 14px;
}

iframe {
bottom: 0;
position: relative;
width: 100%;
height: 35em;
}



Kaynak:kendi kod editörümüzü yapalım
 
Oyla 0 Downvote
G

'GHOST

Uzman üye
31 Mar 2022
1,390
568
Alerantt' Alıntı:
Hepinize merhaba arkadaşlar, Yazılımdan anlayan arkadaşlar bana yardımcı olabilirse çok sevinirim.
⟩ Şimdi benim bir projem var. Bu projemde kod editörlerindeki sistemi Web sitesinde nasıl yapabilirim? Mesela;
»» <p> Hello World </p> ««
<Textarea> ile kullandığımızda kod yazılır. Ben bu kodun renkli olmasını istiyorum. Yani kişi gelip kod üzerinde değişiklik yapabilecek ve yapsa bile aynı şekilde renkli renkli yazacak. Buna en iyi örnek verebileceğim site ``codepen.io``.

⟩ Aşağıdaki bağlantıdan ise kod editörüne iyice bakın. Kodlar üzerinde oynama yapabiliyorum. Aynı HTML editörleri gibi. Bu böyle bir sitemi sitemde kullanmak istiyorum. W3Schools online HTML editor

⟩ Kısaca kod editörü gibi bişey yapmak istiyorum. Nasıl yapabilirim?

(?) Kullanmam gereken <tag>'lar neler?
(?) JavaScript sistemi nasıl olmalı? = Kaynak verebilirsiniz...
Genişletmek için tıkla ...
Merhaba değerli forum üyesi;

Eğer istersen codepe.io nün iframe ini sitene dahil edebilirsin.​
 
Oyla 0 Downvote
Alerantt

Alerantt

Üye
2 Nis 2022
157
61
39.790038,39.476472
L0HXT' Alıntı:
HTML:
<html>
<head>
<title>Kodumun Editoru</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="style.css" />
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}

.dark-mode {
background-color: violet;
color: white;
}
</style>


</head>

<body>

<textarea id="html" placeholder="HTML"></textarea>
<textarea id="css" placeholder="CSS"></textarea>
<textarea id="js" placeholder="JavaScript"></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="app.js"></script>
<button onclick="myFunction()">Renk butonu</button>



<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>



</body>
</html>


JavaScript:
function compile() {
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;

document.body.onkeyup = function() {
code.open();
code.writeln(
html.value +
"<style>" +
css.value +
"</style>" +
"<script>" +
js.value +
"</script>"
);
code.close();
};
}
compile();


CSS:
body {
text-align: center;
}

textarea {
width: 32%;
float: top;
min-height: 250px;
overflow: scroll;
margin: auto;
display: inline-block;
background: #f4f4f9;
outline: none;
font-family: Courier, sans-serif;
font-size: 14px;
}

iframe {
bottom: 0;
position: relative;
width: 100%;
height: 35em;
}



Kaynak:kendi kod editörümüzü yapalım
Genişletmek için tıkla ...
kanka eline sağlık fakat senin gösterdiğin gibi değil. Benim istedeğim Textarea'ların renklenmesi. Yoksa o sistemi yapmak çok basit. Textarea renklendirme olacaktı. hani HTML kodlarını yazdığın uygulama gibi olmasını istiyorum. Sadece kodlar renkli olacak.
 
Oyla 0 Downvote
Alerantt

Alerantt

Üye
2 Nis 2022
157
61
39.790038,39.476472
The_Dark_Hornet' Alıntı:
Bunun için css ve javascript i iyi bilip aldigin inputa gire renklendirme yapabilirsin.
Genişletmek için tıkla ...
İnput, Textarea veya herhangi bir elemente sadece bir renk atayabiliriz. Mesela;

CSS: 
textarea {
  color: red;
}
gibisinden. Ve bunu yapınca bize sadece tek renkli bir input verecek. Bak mesela THT'nin aşağıdaki renklendirilmiş haline.
PHP: 
echo $text;
↑↑↑↑↑ Aslında burada şu tarzda bir çıktı veriyor ↓
<span class="element"> echo </span>
<span class="element2"> $text </span>
→ kod editörü illaki kullanmışsınızdır. Python olur, Java olur hiç fark etmez. Kodlarınızı yazarken yazdığınız komutların editörde renkli renkli yazıldığını da görmüşsünüzdür. Bunu nasıl yapabilirim bunu cevabını istiyorum. Yoksa "Codepen.io", "github.com", "dabblet", "Liveweave", "JSFiddle", "Codeply"... Bu siteleride çok kullanıyorum.
 
Oyla 0 Downvote
G

'GHOST

Uzman üye
31 Mar 2022
1,390
568
Alerantt' Alıntı:
İnput, Textarea veya herhangi bir elemente sadece bir renk atayabiliriz. Mesela;

CSS: 
textarea {
  color: red;
}
gibisinden. Ve bunu yapınca bize sadece tek renkli bir input verecek. Bak mesela THT'nin aşağıdaki renklendirilmiş haline.
PHP: 
echo $text;
↑↑↑↑↑ Aslında burada şu tarzda bir çıktı veriyor ↓
<span class="element"> echo </span>
<span class="element2"> $text </span>
→ kod editörü illaki kullanmışsınızdır. Python olur, Java olur hiç fark etmez. Kodlarınızı yazarken yazdığınız komutların editörde renkli renkli yazıldığını da görmüşsünüzdür. Bunu nasıl yapabilirim bunu cevabını istiyorum. Yoksa "Codepen.io", "github.com", "dabblet", "Liveweave", "JSFiddle", "Codeply"... Bu siteleride çok kullanıyorum.
Genişletmek için tıkla ...
Bu kontrol edebilirsin mesela echo yazıldıysa mavi vb. gibisinden
 
Oyla 0 Downvote
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.