Login [Register]
Don't have an account? Register now to chat, post, use our tools, and much more.

Do you like the shown code box?
Yes
 70%  [ 7 ]
No
 30%  [ 3 ]
Total Votes : 10

It would look very nice if the [code][​/code] thing could be a box with numbers on the left. Similar to how irccloud shows pastebins, but with syntax highlighting. I like Quora's code boxes. It looks clean and modern:
I too, love Quora's code boxes. However, wouldn't we need to make huge changes to BBCode to incorporate that nicer code box? I feel that if whoever you are asking to use this cleaner box would have to do a lot of new coding, as that code box is from the LaTeX text formatting system, rather than BBCode. In theory, we could change the whole website to LaTeX, but I feel that it is not worth the time it would take to do that. Moreover, it would break almost every post that uses BBCode, and everyone with an image in their signature.
You could probably use Tampermonkey to include CodeMirror dependencies, then target every [code][/code] element and turn it into a CodeMirror instance. That would give you syntax highlighting and line numbers.
Battlesquid wrote:
You could probably use Tampermonkey to include CodeMirror dependencies, then target every
Code:
element and turn it into a CodeMirror instance. That would give you syntax highlighting and line numbers.


But would that break the ICE, TI BASIC and such highlighting that is present already? If so, I don't consider it to be worth it although I do like the Quora code box look. Furthermore, cemetech does not resemble most modern websites. These code boxes would look a bit out of age imo.
LAX18 wrote:
Battlesquid wrote:
You could probably use Tampermonkey to include CodeMirror dependencies, then target every
Code:
element and turn it into a CodeMirror instance. That would give you syntax highlighting and line numbers.


But would that break the ICE, TI BASIC and such highlighting that is present already? If so, I don't consider it to be worth it although I do like the Quora code box look. Furthermore, cemetech does not resemble most modern websites. These code boxes would look a bit out of age imo.


Tampermonkey and Stylus are chrome extensions, meaning only he would be able to see the changes (just like users who want a different theme from the ones provided). As for syntax highlighting, you could probably just include the same CSS files used to style the code or something like that.
I think this relates to the topic I made a couple weeks ago about color coding. We could also have alternating row colors with a hover to help readability which is really just adding in something like this:

Code:
<style>
    li:nth-child(odd) {background: #EEF;}
    li:nth-child(even) {background: #FFF;}
    li:hover{background: #CCC;}
    ul {list-style-type:decimal-leading-zero; background: #999; border: solid #555 1.5px; max-height: 16em; overflow: auto; word-wrap: break-word;}
    li {padding-left: 0.5rem; font-family: monospace;}
</style>

Here is what that would look like (line 6 is being hovered over):



But this assumes that each line is in a pretty little <li> tag like this:

Code:
    <ul>
        <li>Line 1</li>
        <li>Line 2</li>
        <li>Line 3</li>
        <li>Line 4</li>
        <li>Line 5</li>
        [...]
    </ul>


I don't think this is the case currently, so the harder part would be converting the messy code blocks into a table or list.
Not really. Messy code blocks shouldn't be a problem.

Just split by newlines and wrap each section of code with a li tag.

I don't like the alternating line colors like that or the hover, that's too drastic of a change. Also, the word-wrap property may cause problems.

I do like just the line numbers, but you might want to add a bit more contrast between the background and the letters. Also, there is a bit too much padding on the numbers for my taste.

Here's my suggestion, it sticks to the original colors better:

Code:
    li:nth-child(odd) {background: #BBB;}
    li:nth-child(even) {background: #CCC;}
    ul {list-style-type:decimal-leading-zero; background: #AAA; border: solid #555 1.5px; max-height: 16em; overflow: auto;}
    li {padding-left: 0.5rem; font-family: monospace;}
  
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
Page 1 of 1
» All times are GMT - 5 Hours
 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

 

Advertisement