How To Quench My Thirst For CS Without A Compiler

Pages: 123
highwayman (582)
Woowwww. Someone reported me 👏👏 good job big boy. You realize I can’t use those for highlighting now, right? Idiot.


Edit: wow. You are really fing this up for yourself! XD lol
Last edited on
helios (17607)
Good. The forum is a tool for discussion, not your personal text editor.
highwayman (582)
XD yeah yeah. Too true. It won’t change much but I guess yeah.
highwayman (582)
Ok ya’ll, if you really want me out of your face, then if you fix this program, then I’ll be gone. Only problem is it’s in js. It just diesn’t work at all. The code isn’t highlighted.

data:text/html;base8,
<html>
<head>
<title>Code Editor</title>
<style>
body{
  background:#111;
}
.scroll{
  overflow-x:auto;
  overflow-y:auto;
  white-space:nowrap;
}
#code-editor{
  margin:auto;
  margin-top:3%;
  width:90%;
  height:90%;
  color:#EEE;
  background:#000;
  font-family:monospace,monospace;
  font-size:20;
  padding:3px;
  display:block;
}
.code-comment{
  color:#0F0;
}
.code-keyword{
  color:#FA0;
}
.code-number{
  color:#FD0;
}
</style>
</head>
<body>
<span class="scroll"id="code-editor"contenteditable="true">#include &lt;iostream&gt;
<br/>int main(int argc,char *argv[]) {
<br>&nbsp;&nbsp;return 0;
<br>}
</span>
<script>
const editor = document.getElementById("code-editor");

function mktick(func) {
  function newFunc() {
    func();
    requestAnimationFrame(newFunc);
  };
  return newFunc;
}

function lint() {
  const exprs = 
  [
    [
      "/\\*(.*)\\*/" ,
      "<span class=\"code-comment\">/*$1*/</span>"
    ],
    [
      "//(.*)" ,
      "<span class="code-comment">//$1</span>"
    ],
    [
      "([\w\(\);\{\}\*/\+-%\=\!:\?&\|\^ ,])(\d+)([\w\(\);\{\}\*/\+-%\=\!:\?&\|\^ ,])" ,
      "$1<span class="code-number">$2</span>$3"
    ],
    [
      "([\\w\\(\\);\\{\\}\\*/\\+-%\\=\\!:\\?&\\|\\^,])(asm|break|case|catch|continue|default|do|else|explicit|extern|for|friend|goto|if|mutable|namespace|private|protected|public|static_assert|struct|switch|this|thread_local|try|typedef|typeid|typename|union|using|virtual|while|template|class|decltype|void|char|char16_t|char32_t|short|signed|int|unsigned|long|float|double|const|volatile|bool|true|false|typename|operator|new|alignof|enum|sizeof|static_cast|nullptr|auto|throw|dynamic_cast|reinterpret_cast|const_cast|alignas|constexpr|inline|static|noexcept|delete)([\\w\\(\\);\\{\\}\\*/\\+-%\\=\\!:\\?&\\|\\^,])" ,
      "$1<span class="code-keyword">$2</span>$3"
    ],
    [
      " ",
      "&nbsp;"
    ]
  ];
  const editor = document.getElementById("code-editor");

  var tmp = editor.innerText;
  for(let it of exprs) {
    tmp = tmp.replace(new RegExp(it[0]), it[1]);
  }
  editor.innerHTML = tmp;
}

mktick(lint)();
</script>
</body>
</html>
Last edited on
mbozzi (3944)
<html>
  <head>
    <meta charset="utf-8">
    <title>Code Editor</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.50.2/codemirror.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.50.2/codemirror.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.50.2/mode/clike/clike.min.js"></script>
  </head>
  <body>
    <h3>Code Editor</h3>
    <form>
      <textarea id="code" name="code">
      </textarea>
    </form>

    <script>
      var conf = { lineNumbers: true, mode: "text/x-c++src" };
      var editor
	  = CodeMirror.fromTextArea(document.getElementById("code"), conf);
    </script>
  </body>
</html>


But anyway. Typography 101: save emphasis for text that requires special attention.

Used sparingly, emphasis draws the eye to particularly important bits of code, and assists in answering questions like
"Am I reading a comment?",
"Where am I within my source file?",
"Where does this complicated string literal end?",
And
"Are there any special considerations about this block of code?"

If your code looks like angry fruit salad, no special color or font is going to draw the eye, and the benefits of highlighting are lost. Even if some restraint is exercised, for example, as with this site's relatively inoffensive color scheme, it's still undesirable to draw the programmer's eye to just anything.

There's nothing to gain by coloring ordinary keywords, operators, or numbers. Instead, emphasize block comments and long strings, parts of comments that mark outstanding errors or tricky pitfalls (e.g., make FIXME(highwayman) bright red), and color any little syntactic details that help you avoid errors.
Last edited on
highwayman (582)
[code...]
Aw dam. That uses outside links. I can’t use outside links :( thank you for responding though.

Ehhh... Okie. I’m not sure how I’m gonna figure out how to make a thing that detects errors if I can’t even make a thing that can detect keywords! XD Also, is my code spaghetti code? Is it really messy? Hoe can I fix that if that’s what you’re saying? Besides extra features on a syntax highlighter.
mbozzi (3944)
Nah, I was just raving about "the right way" to highlight code. I wasn't talking about your programs.

Can you simply download codemirror now and use the downloaded version later, when you're offline?
Last edited on
highwayman (582)
Sadly no. I can’t access anything outside of basically this site’s domain or the stackoverlfow.com domain.
helios (17607)
Are you in prison?
highwayman (582)
Lol hey that’s actually a pretty good metaphor for it. No. I’m not.
highwayman (582)
WHAT. WHATTTT. WHATTTTTTTT WAITT A SECOND WHAT. IT WORKS!!!! OMG MBOZZI THANK YOU SO MUCH OMG OMFG AYUYAYYYYAAAYYYYY :D I’M SO HAPPY THAT YOU SOO MUCHH
Topic archived. No new replies allowed.
Pages: 123