Giter Site home page Giter Site logo

Multi color highlighting about primer-spec HOT 5 OPEN

awdeorio avatar awdeorio commented on June 4, 2024
Multi color highlighting

from primer-spec.

Comments (5)

seshrs avatar seshrs commented on June 4, 2024

Thanks for the feedback! Yes, I definitely see the issue with explaining large codeblocks.

I’m hesitant about whether multi-color highlighting is the best solution though, especially from the point-of-view of accessibility (for students with color vision deficiencies).

Instead, what do you think about “callouts” that appear inside the codeblock and appear in the margin or to the right of the code? I’ll need to look for examples on other websites and give some thought to the API…

from primer-spec.

seshrs avatar seshrs commented on June 4, 2024

Ah ha, found an example of “annotations”: https://squidfunk.github.io/mkdocs-material/reference/code-blocks/#adding-annotations

Though I think I’d choose a slightly different API, and make it possible to add multi-line annotations.

Aside: I also really like Docusarus’ implementation of “magic comments” for highlighting ranges. I think I can implement that too! https://docusaurus.io/docs/markdown-features/code-blocks#highlighting-with-comments

from primer-spec.

awdeorio avatar awdeorio commented on June 4, 2024

Thanks for pushing back with better suggestions!

Ah ha, found an example of “annotations”

So basically pop-ups inline with code. One downside is that it might not be obvious that you should read this.

magic comments” for highlighting ranges.

Is the idea that you click something to change which lines are highlighted? That's cool! You could show 1 block of code. Show default (first) highlighting. Explain it in the following paragraph. Then in the next paragraph say "now we're talking about this other chunk. There's a link that causes the highlighting to shift.

from primer-spec.

seshrs avatar seshrs commented on June 4, 2024

Is the idea that you click something to change which lines are highlighted?

Oh hmm, I hadn’t thought about that. I’ll need to think a bit more about that one.

Regarding magic comments, I was referring to using code block comments to indicate which lines should be highlighted, instead of specifying line numbers. (It would be easier for you as a spec author to see which lines are highlighted.)

from primer-spec.

awdeorio avatar awdeorio commented on June 4, 2024

Regarding magic comments, I was referring to using code block comments to indicate which lines should be highlighted, instead of specifying line numbers. (It would be easier for you as a spec author to see which lines are highlighted.)

Meh, I could take it or leave it with the magic comments.

from primer-spec.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.