Jump to content

Editor de codigo em html css e js


Recommended Posts

Olá tudo bom?
Bom estou tentando criar um editor de codigo em html, css e javascript.
Como o Rust (https://play.rust-lang.org/) ou o repl.it, o problema é a parte de aplicar um estilo nas palavra.
Vi uma maneira de fazer isso usando uma div com um atributo

<div contenteditable="true"></div>

e usando a seguinte função javascript

editor.addEventListener("keyup", () => {

let ctn = editor.innerHTML

  for (let s of sintaxe){

ctn = ctn.replace(s.palavra+" ", `<span class="${s.classe}">${s.palavra}</span> `)

    }
 
    editor.innerHTML = ctn
    placeCaretAtEnd(editor)
})
porem nao funciona direito, pois tem ainda uma função que posiciona o cursor no fim da linha a todo momento.
Alguem poderia me ajudar com video, artigos e etc. Para que possa aplicar cor nas palavras chave e entre outros?
 
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...