78 votes

Syntax highlighting for the coders, invites for everyone

Another open-source contribution has now been implemented - @Soptik wrote the code to add support for syntax highlighting, which should be great for topics like the programming challenges in ~comp.

I'll update the formatting documentation to include info about it shortly, but it's straightforward to use. You have to use a "fenced code block", which usually means that you put 3 backticks above and below the code, and include the name of the language after the 3 backticks above it. So for example, markdown like this:

```python
def word_count(string: str) -> int:
    """Count the number of words in the string."""
    return len(WORD_REGEX.findall(string))
```

will render as:

def word_count(string: str) -> int:
    """Count the number of words in the string."""
    return len(WORD_REGEX.findall(string))

This is being done by the "Pygments" library, which supports a lot of languages: http://pygments.org/docs/lexers/

And completely unrelated to that, it's been a while since I gave everyone some invite codes, so I've topped everyone back up to 5 (and as always, feel free to let me know if you need more). You can access them on this page: https://tildes.net/invite

That's all for now, thanks everyone (and @Soptik in particular). There should also be more changes coming before too long, I've been working on some major updates to the comment-tagging system and hopefully should be able to implement those soon.

24 comments

  1. meghan Link
    Congrats @Soptik on your first contribution! console.log("Looks great!");

    Congrats @Soptik on your first contribution!

    console.log("Looks great!");
    
    28 votes
  2. Catt Link
    Awesome addition. Thanks!

    Awesome addition. Thanks!

    13 votes
  3. [5]
    kaushalmodi (edited ) Link
    As an aside, can the font family not be enforced for code blocks? This is the current CSS, which sets the font to not-so-pretty Courier on my machine: code, kbd, pre, samp { font-family: "SF...

    As an aside, can the font family not be enforced for code blocks?

    This is the current CSS, which sets the font to not-so-pretty Courier on my machine:

    code, kbd, pre, samp {
        font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
        font-size: 1em;
    }
    

    How about setting just font-family: monospace;. Then I can see the code blocks in my browser-default monospace font (Iosevka rocks!).

    12 votes
    1. [3]
      deing (edited ) Link Parent
      WARNING: This comment contains CSS known to the State of Tildestia to cause frustration due to being a wall of text. Collapse this comment and consult a physician. I currently use Stylus to adjust...

      WARNING: This comment contains CSS known to the State of Tildestia to cause frustration due to being a wall of text. Collapse this comment and consult a physician.

      I currently use Stylus to adjust the formatting on Reddit and Tildes.

      For example, all Data (Usernames, Tags, …) is displayed in Fira Sans, all Interactions and Code (Buttons, Vote, Tag, …) in Monoid, and all Body Text in Charter. I think this makes it a lot more fancy than just plain Roboto everywhere.


      /*Body Text*/
      body { 
          font-family: "Charter", "Bitstream Charter", "Vollkorn", "Gentium", serif;
      }
      /*Data Text*/
      div.comment-itself header, footer.topic-info, body .topic-full-byline, .topic-metadata, .topic-tags, a.site-header-context, header.topic-comments-header, div.listing-options {
          font-family: "Fira Sans Medium", "Open Sans Medium", "Roboto Medium", sans-serif;
      }
      
      /*Info Text*/
      body .comment header, aside#sidebar, a.logged-in-user-username, .topic-listing-filter {
          font-family: "Fira Sans", "Open Sans", "Roboto", sans-serif;
      }
      
      /*Interactables and Code*/
      button, a.btn.btn-primary, input, optgroup, select, textarea, code, div.comment-itself menu {
          font-family: "Monoid", monospace;
          font-size: 12px !important;
      }
      
      /*"Original Branding"*/
      a.site-header-logo {
          font-family: "Roboto";
      }
      
      
      
      blockquote b, blockquote strong {
          font-weight: bolder;
          font-style: italic;
      }
      /*I think tags in smallcaps look very good*/
      .topic-metadata, .topic-tags {
          font-variant: small-caps;
      }
      
      
      .user-label {
          padding: 0 !important;
          font-size: 1em !important;
          border: none !important;
      }
      
      /*Adds a small user icon in front of the handle in the top right*/
      a.logged-in-user-username:before {
          content: "";
          padding-right: 1em;
          font-family: "FontAwesome";
      }
      
      /*Animated mouseover for the handle*/
      a.logged-in-user-username:hover {
          color: #333;
          transition: color 1s;
          text-decoration: none;
      }
      
      /*Hide the "from" phrase in topic list sorting*/
      div.listing-options form label[for=period] {
          display: none;
      }
      
      /*Recolor Tildes Enhanced's new comment button to differentiate it from the back to top button*/
      input#TE_scrollToNewComments {
          background-color: #cb4b16;
          border-color: #cb4b16;
      }
      
      input#TE_scrollToNewComments[value="Back to Top"] {
          background-color: #268bd2;
          border-color: #2482c5;
      }
      

      Results of this style with Solarized Light Theme:

      13 votes
      1. kaushalmodi Link Parent
        Awesome! That's a Firefox (which is my default browser too) add-on too. I haven't ever used this add-on; will have a look. Thanks!

        Awesome! That's a Firefox (which is my default browser too) add-on too. I haven't ever used this add-on; will have a look. Thanks!

        5 votes
      2. kaushalmodi (edited ) Link Parent
        Don't details and summary work? Testing .. <details> <summary> This is summary. Click to expand. </summary> Here are more details. </details> Update: Nope, it doesn't, sorry for that useless...

        This comment contains CSS known to the State of Tildestia to cause frustration due to being a wall of text. Collapse this comment and consult a physician.

        Don't details and summary work?

        Testing ..

        <details> <summary> This is summary. Click to expand. </summary> Here are more details. </details>

        Update: Nope, it doesn't, sorry for that useless comment notification.


        Update 2: There's an issue tracking support for details/summary. If anyone is interested, please vote it!

        4 votes
    2. Deimos Link Parent
      Oh sure, I can probably change that. That font list is coming from Spectre.css, which is what I'm using as the "base" CSS: https://picturepan2.github.io/spectre/elements.html#typography-fonts

      Oh sure, I can probably change that. That font list is coming from Spectre.css, which is what I'm using as the "base" CSS: https://picturepan2.github.io/spectre/elements.html#typography-fonts

      8 votes
  4. kaushalmodi (edited ) Link
    Yay! import re proc word_count(str: string, re: Regex): int = ## Count the number of ``re`` regular expression matches in ``str``. echo str.findAll(re) return len(str.findAll(re)) echo...

    Yay!

    import re
    
    proc word_count(str: string, re: Regex): int =
        ## Count the number of ``re`` regular expression matches in ``str``.
        echo str.findAll(re)
        return len(str.findAll(re))
    echo word_count("Works for Nim too!", re"Nim") # 1
    echo word_count("Works for Nim too!", re"o") # 4
    

    Update: Well, it's a bit shabby for Nim, but not too bad.

    8 votes
  5. Emerald_Knight Link
    @Soptik you just hit one of my biggest wishlist items. Nice work! On a side note, now I need to retroactively add syntax highlighting to all of my old code snippets!

    @Soptik you just hit one of my biggest wishlist items. Nice work!

    On a side note, now I need to retroactively add syntax highlighting to all of my old code snippets!

    7 votes
  6. [6]
    pseudolobster Link
    Oh, neat, it has support for formatting markdown! That could be useful for explaining formatting to people. [text](http://url) **bold!** I wonder what happens if... ```md Meta ```

    Oh, neat, it has support for formatting markdown! That could be useful for explaining formatting to people.

    [text](http://url) **bold!**
    I wonder what happens if...
        ```md
        Meta
        ```
    
    5 votes
    1. [5]
      kaushalmodi Link Parent
      [text](http://url) **bold!** I wonder what happens if... ```md Meta ``` I wrote the above using: ````md [text](http://url) **bold!** I wonder what happens if... ```md Meta ``` ````
      [text](http://url) **bold!**
      
      I wonder what happens if...
      
      ```md
      Meta
      ```
      

      I wrote the above using:

      ````md
      [text](http://url) **bold!**
      
      I wonder what happens if...
      
      ```md
      Meta
      ```
      ````
      
      5 votes
      1. [4]
        giodamelio Link Parent
        All this is making me miss the source button on Reddit (or maybe RES adds it) that lets you see the original markdown source of a comment.

        All this is making me miss the source button on Reddit (or maybe RES adds it) that lets you see the original markdown source of a comment.

        10 votes
        1. [3]
          cfabbro Link Parent
          source is most definitely an RES feature. Having a native equivalent on Tildes would be nice too though IMO... which Deimos seemed to somewhat agree with, by the looks of it.

          source is most definitely an RES feature. Having a native equivalent on Tildes would be nice too though IMO... which Deimos seemed to somewhat agree with, by the looks of it.

          13 votes
          1. giodamelio Link Parent
            That would be a nice thing to have for sure.

            That would be a nice thing to have for sure.

            3 votes
          2. Lynndolynn Link Parent
            This doesn't sound difficult to implement - has no one made a pull request for it yet?

            This doesn't sound difficult to implement - has no one made a pull request for it yet?

            3 votes
  7. deing Link
    fn main() { println!("Very nice, but have you considered rewriting it in Rust? ;)"); }
    fn main() {
        println!("Very nice, but have you considered rewriting it in Rust? ;)");
    }
    
    9 votes
  8. [3]
    trojanhorse Link
    Is this a bug or is it meant to work like this? I had an invite code generated and then when you gave me five it actually ended up allowing me to have 6 total. I currently have 6 total codes. Is...

    Is this a bug or is it meant to work like this? I had an invite code generated and then when you gave me five it actually ended up allowing me to have 6 total. I currently have 6 total codes. Is that a bug or is it intended to work like that? So theoretically someone could generate five invite codes and then if you give them five more they'll have 10 total. Is it meant to work like that?

    3 votes
    1. [2]
      Deimos Link Parent
      It's not really intentional, but I'm also not really worried about it. I'll generally give people codes whenever they ask anyway, they're not difficult for people to get if they want to.

      It's not really intentional, but I'm also not really worried about it. I'll generally give people codes whenever they ask anyway, they're not difficult for people to get if they want to.

      4 votes
  9. json Link
    const ok = n => console.log(`n=${n}`); ok(5); ok('hello');
    const ok = n => console.log(`n=${n}`);
    ok(5);
    ok('hello');
    
    2 votes
  10. Crespyl (edited ) Link
    This is really cool! I wonder though, if it might be worth revisiting the styles for the highlighted code blocks. At least on my display with either Solarized Light or Solarized Dark themes, the...

    This is really cool!

    I wonder though, if it might be worth revisiting the styles for the highlighted code blocks. At least on my display with either Solarized Light or Solarized Dark themes, the font/weight and contrast are just a little harder to read.

    2 votes
  11. mrbig Link
    That’s awesome, and has the potential of making Tildes a prime destination for programming content. You guys (developers and contributors) never cease to surprise me positively. Thanks a bunch and...

    That’s awesome, and has the potential of making Tildes a prime destination for programming content. You guys (developers and contributors) never cease to surprise me positively. Thanks a bunch and keep up the good work!

    2 votes
  12. jgb Link
    Great addition. Very nicely done.

    Great addition. Very nicely done.

    1 vote
  13. teaearlgraycold Link
    This is the day I've been waiting so long for!

    This is the day I've been waiting so long for!

    1 vote