Comments (5)
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.
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.
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.
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.
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)
- `script/server` requires specific shells HOT 7
- Bump header level styles in sidebar if needed HOT 1
- Primer Spec v2: Require deploy via GitHub Actions? HOT 1
- Task Lists: Use 'pointer' cursor on hover
- Spooky icons even when Spooky theme not chosen HOT 2
- Data-highlight inside callout HOT 2
- Sidebar links broken in preview HOT 5
- Dark mode code blocks flash when settings is closed HOT 1
- Markdown tables are not rendered HOT 2
- Copy button in enhanced codeblock omits whitespace HOT 3
- Enhanced code block copy-paste trailing newline
- [PR Previews] PDFs do not generate with correct styles the first time.
- [Code blocks] Overflow gets clipped in print previews
- [Enhanced code blocks] No-line-numbers variant doesn't occupy full width
- [Enhanced code blocks] Code block in EECS 280 P1 doesn't highlight lines HOT 1
- [Enhanced Code Blocks] Line-by-line copying excludes empty lines
- Local render Liquid Exception HOT 6
- Copying an enhanced codeblock duplicates newlines HOT 1
- Sidebar has wrong URLs in PR previews HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from primer-spec.