78 votes

Syntax highlighting for the coders, invites for everyone

Posted by Deimos (edited )
Tags: changelog

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.

22 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. [4]
    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]
      Comment deleted by author
      Link Parent
      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 .. This is summary. Click to expand. Here are more details. Update: Nope, it doesn't, sorry for that useless comment notification. Update 2: There's an...

        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 ..

        This is summary. Click to expand. Here are more 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. [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
  8. 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
  9. 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
  10. 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
  11. jgb
    Link
    Great addition. Very nicely done.

    Great addition. Very nicely done.

    1 vote
  12. 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