A. Rahman A. Rahman -3 years ago 77
CSS Question

Syntax Higlighter For Site

I'm trying to make a website. But I need to make a syntax highlighting program that Categorize commands based on what they do. For example, one group would be I/O, another one would be Control commands. And you would color the text based off of what type of command it is. Please I need help.

<html>
<head>
<div class=β€œio”>Text goes here</div>
div.io {
color: #0A0A0A;
</head>
<!--
PREFIX = 'lang/'
SUFFIX = '.js'
-->
<body onload="sh_highlightDocument('lang/', '.js');">

<!--
CLASS = 'sh_java'
PREFIX + CLASS + SUFFIX = 'lang/' + 'sh_java' + '.js'
= 'lang/sh_java.js'
-->
<pre class="sh_java">
public class X {}
</pre>

</body>
</html>

Answer Source

There are a few problems with your code above:

  • You are writing your <div> in the <head> section, which is invalid HTML
  • You are using curly β€œ ” quotes on your <div> class declaration, which won't work

In addition to this, your question is incredibly vague. There don't appear to be any 'control commands' in your question.

Having said that, it sounds like you're trying to turn the text in the io class red, and some additional content in a control-commands class green.

This can be done with JavaScript's .getElementsByClassName() method and .style property as follows:

function change() {
  document.getElementsByClassName('io')[0].style.color = 'red';
  document.getElementsByClassName('control-commands')[0].style.color = 'green';
}
<div class='io'>IO</div>
<div class='control-commands'>Control Commands</div>
<br />
<button onclick="change()">Change</button>

Keep in mind that .getElementsByClassName returns a Node List, so you need to access the first index of that with [0] as above.

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download