Add line numbers to prismjs plugin #5821

Another thought.. This PR enables or disables line numbering for a whole site. It might be useful to specify line number for individual blocks, and also the starting line number for a block. I'm not sure what the best way to do that, maybe similarly to the line highlighting syntax?

Number lines, starting from 1:

 ```js{6-8}{numberLines: true}

Number lines, starting from 5:

 ```js{6-8}{numberLines: 5}

Thoughts?

phacks · 2018-06-12T13:31:18Z

Hi @m-allanson! Thanks for the feedback. I’ll be looking into the layout issues and the possible enhancements, hopefully in the next few days 😊

phacks · 2018-06-14T12:33:58Z

I fixed the issue on using-remark and added the featured your suggested @m-allanson !

The issue was caused by this padding overwriting the prism-line-numbers.css stylesheet :

a2a308e#diff-2e101cb7175492ace9066869ab398490L135

Removing it didn’t impact the code block style, so I went with it — what do you think?

phacks · 2018-06-14T15:08:20Z

It looks like recent Travis builds are failing with an obscure versioning error:

Would you have an idea on how to fix it?

pieh · 2018-06-14T20:29:12Z

@phacks this is something I introduced and need to fix! Sorry for disturbance

phacks · 2018-06-16T21:18:41Z

@pieh It’s fixed! Many thanks 😊

phacks · 2018-06-17T21:05:03Z

Just tried to rebase to master and it broke the code blocks layout again… Back to the drawing board!

phacks · 2018-06-17T21:41:09Z

…aaand it’s fixed again!

changes made

phacks · 2018-07-17T15:15:19Z

@m-allanson Fixed, thanks! I think I made a mistake somewhere while migrating the branch to v2 😅

phacks · 2018-07-24T07:30:21Z

@m-allanson @KyleAMathews Hi! Small reminder that I updated my PR and it should be ready to go! Thanks 😊

phacks · 2018-07-31T07:35:35Z

@m-allanson @KyleAMathews Hi! This PR should be ready for you to review and merge, many thanks!

m-allanson · 2018-08-01T09:58:37Z

Thanks for the reminders @phacks, sorry you had to wait so long on another review for this.

I ran through another check, and generally things look good 👍 However, I noticed one issue that will need fixing. It seems that this change adds extra padding around all code blocks, which it shouldn't do. Here's a couple of screenshots with this PR on the left, and the currently live example site on the right:

It seems there's extra padding on all sides of the code blocks. Could you fix that up to match the padding on the live example site? Apologies in advance if this is an annoying CSS specificity thing!

Hopefully fixing this will remove some of that large gap to the left of the line-numbers which should look a bit neater too. Please drop any questions here if you have them, I'll endeavor to get to them more quickly this time 😅

phacks · 2018-08-01T15:40:26Z

@m-allanson @KyleAMathews How did I miss that 😅Should be better now, as you can see:

KyleAMathews · 2018-08-01T15:41:28Z

Deploy preview for using-postcss-sass failed.

Built with commit ece4d0d

https://app.netlify.com/sites/using-postcss-sass/deploys/5b72ce87c6aed62d422b61f3

KyleAMathews · 2018-08-01T16:00:57Z

Deploy preview for gatsbyjs failed.

Built with commit 53eae6e1667ed48cdb5160dce6520f5a491b24f1

https://app.netlify.com/sites/gatsbyjs/deploys/5b61d3eac9659221ab5dfd3e

KyleAMathews · 2018-08-01T16:25:18Z

Deploy preview for gatsbyjs failed.

Built with commit ece4d0d

https://app.netlify.com/sites/gatsbyjs/deploys/5b72ce86c6aed62d422b61e7

phacks · 2018-08-08T11:17:06Z

@m-allanson @KyleAMathews Sorry if I come off as a little bit pushy — do you think you can have another look (and hopefully the last one!) at this PR, now that I fixed the CSS padding problem? Many thanks! 😊

m-allanson · 2018-08-09T15:45:37Z

Hey @phacks, don't worry that's not pushy, it's good to get reminders sometimes! I want to get back to this as soon as I can, but it's looking like that'll be early next week. Sorry for the delay and thanks again for your patience.

* master: (597 commits) Add a site(https://mojaave.com) to showcase list (gatsbyjs#7275) feat: create a doc for open source pair programming sessions (gatsbyjs#7266) [docs] Add video lesson to the StaticQuery docs (gatsbyjs#7249) [v2] docs - update page query docs (gatsbyjs#7285) [v2] docs "Styling" overview (gatsbyjs#7288) Remove delay (gatsbyjs#7273) add site (gatsbyjs#7291) Adding new site to the showcase. (gatsbyjs#7281) chore(release): Publish initial webpack externals support (gatsbyjs#7245) add missing package dependencies (gatsbyjs#7259) add: custom configuration overview (gatsbyjs#7231): tutorial part four updates (gatsbyjs#7240) [www] Fix showcase search, checkbox styles (gatsbyjs#7014) (gatsbyjs#6584): Restructure plugin overview and plugin authoring pages (gatsbyjs#7229) Use Hubspot form for email subscription (gatsbyjs#7233) Adding bootstrap CV starter (gatsbyjs#7207) Stub Articles and new names (gatsbyjs#7200) Improve readability of verbose logging code in wordpress source plugin (gatsbyjs#7146) Update hash link to scroll to right section of page (gatsbyjs#7161) ...

KyleAMathews · 2018-08-14T12:43:43Z

Deploy preview for using-contentful failed.

Built with commit ece4d0d

https://app.netlify.com/sites/using-contentful/deploys/5b72ce89c6aed62d422b6202

m-allanson

I think this looks good to go 🎉 thanks @phacks!

I merged the latest changes from master in, broke something, fixed it, added a few more tests and an extra example. Can you check my changes look good to you? If so we can get this merged in :)

phacks · 2018-08-14T15:22:36Z

@m-allanson Awesome, thanks! Looked through your commits and they are fine by me. You can go ahead and merge the PR ☺️

gatsbot · 2018-08-14T15:53:33Z

Holy buckets, @phacks — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. You’ll receive an email shortly asking you to confirm. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

m-allanson · 2018-08-15T08:41:47Z

This has been published as gatsby-remark-prismjs@3.0.0-beta.6

* Add line numbers to prismjs plugin * Fix line numbers with line highlighting layout problems * Scope line numbering by code block, add start index * Fix line numbering problem in using-remark example * Add <gatsby-remark-prismjs>/add-line-numbers.js to gitignore * Fix oversized padding around code blocks * Run missed tests and add a few more * Make it easier to read generated code string * Use plain old string concatenation instead * Add one more snapshot test * Add another example * Skip formatting for this block

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch 2 times, most recently from 4baa2ef to 905f7bc Compare June 9, 2018 18:16

phacks mentioned this pull request Jun 9, 2018

How to add line numbers with PrismJS? #5775

Closed

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch 2 times, most recently from 8a780a5 to 92d361c Compare June 9, 2018 20:43

m-allanson previously requested changes Jun 12, 2018

View reviewed changes

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch from 53d8452 to a2a308e Compare June 14, 2018 12:31

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch from a2a308e to fe303b4 Compare June 14, 2018 14:57

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch from fe303b4 to cea7660 Compare June 16, 2018 21:05

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch from cea7660 to 44d8463 Compare June 17, 2018 21:40

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch 2 times, most recently from 1c905f5 to 1512bbd Compare June 20, 2018 09:11

matuzalemsteles mentioned this pull request Jun 25, 2018

New infra from clayui.com with Gatsbyjs liferay/clay#1040

Merged

Add line numbers to prismjs plugin

b62c944

Add <gatsby-remark-prismjs>/add-line-numbers.js to gitignore

beff9ea

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch from ae322e4 to beff9ea Compare July 17, 2018 12:50

Fix oversized padding around code blocks

a5cc869

phacks force-pushed the topics/5775-add-line-numbers-to-prism-plugin branch from 53eae6e to a5cc869 Compare August 1, 2018 15:44

m-allanson added 7 commits August 14, 2018 12:13

Run missed tests and add a few more

07612c0

Make it easier to read generated code string

41d75d0

Use plain old string concatenation instead

2b01f1b

Add one more snapshot test

7bce206

Add another example

4ad949f

Skip formatting for this block

ece4d0d

m-allanson approved these changes Aug 14, 2018

View reviewed changes

m-allanson merged commit 1e9a8e5 into gatsbyjs:master Aug 14, 2018

phacks deleted the topics/5775-add-line-numbers-to-prism-plugin branch August 14, 2018 16:24

timbroder mentioned this pull request Nov 21, 2018

feat(gatsby-remark-prismjs): Allow global line number config #10076

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add line numbers to prismjs plugin #5821

Add line numbers to prismjs plugin #5821

phacks commented Jun 9, 2018 •

edited

Loading

gatsbybot commented Jun 9, 2018

gatsbybot commented Jun 9, 2018 •

edited

Loading

gatsbybot commented Jun 9, 2018 •

edited

Loading

gatsbybot commented Jun 9, 2018

gatsbybot commented Jun 9, 2018

gatsbybot commented Jun 9, 2018

jasperjn commented Jun 11, 2018 •

edited

Loading

m-allanson left a comment

m-allanson commented Jun 12, 2018 •

edited

Loading

phacks commented Jun 12, 2018

phacks commented Jun 14, 2018 •

edited

Loading

phacks commented Jun 14, 2018

pieh commented Jun 14, 2018

phacks commented Jun 16, 2018

phacks commented Jun 17, 2018 •

edited

Loading

phacks commented Jun 17, 2018

phacks commented Jul 17, 2018

phacks commented Jul 24, 2018

phacks commented Jul 31, 2018

m-allanson commented Aug 1, 2018

phacks commented Aug 1, 2018

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018

KyleAMathews commented Aug 1, 2018 •

edited

Loading

phacks commented Aug 8, 2018

m-allanson commented Aug 9, 2018

KyleAMathews commented Aug 14, 2018 •

edited

Loading

m-allanson left a comment

phacks commented Aug 14, 2018

gatsbot bot commented Aug 14, 2018

m-allanson commented Aug 15, 2018

Add line numbers to prismjs plugin #5821

Add line numbers to prismjs plugin #5821

Conversation

phacks commented Jun 9, 2018 • edited Loading

gatsbybot commented Jun 9, 2018

gatsbybot commented Jun 9, 2018 • edited Loading

gatsbybot commented Jun 9, 2018 • edited Loading

gatsbybot commented Jun 9, 2018

gatsbybot commented Jun 9, 2018

gatsbybot commented Jun 9, 2018

jasperjn commented Jun 11, 2018 • edited Loading

m-allanson left a comment

Choose a reason for hiding this comment

m-allanson commented Jun 12, 2018 • edited Loading

phacks commented Jun 12, 2018

phacks commented Jun 14, 2018 • edited Loading

phacks commented Jun 14, 2018

pieh commented Jun 14, 2018

phacks commented Jun 16, 2018

phacks commented Jun 17, 2018 • edited Loading

phacks commented Jun 17, 2018

phacks commented Jul 17, 2018

phacks commented Jul 24, 2018

phacks commented Jul 31, 2018

m-allanson commented Aug 1, 2018

phacks commented Aug 1, 2018

KyleAMathews commented Aug 1, 2018 • edited Loading

KyleAMathews commented Aug 1, 2018

KyleAMathews commented Aug 1, 2018 • edited Loading

phacks commented Aug 8, 2018

m-allanson commented Aug 9, 2018

KyleAMathews commented Aug 14, 2018 • edited Loading

m-allanson left a comment

Choose a reason for hiding this comment

phacks commented Aug 14, 2018

gatsbot bot commented Aug 14, 2018

m-allanson commented Aug 15, 2018

phacks commented Jun 9, 2018 •

edited

Loading

gatsbybot commented Jun 9, 2018 •

edited

Loading

gatsbybot commented Jun 9, 2018 •

edited

Loading

jasperjn commented Jun 11, 2018 •

edited

Loading

m-allanson commented Jun 12, 2018 •

edited

Loading

phacks commented Jun 14, 2018 •

edited

Loading

phacks commented Jun 17, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 1, 2018 •

edited

Loading

KyleAMathews commented Aug 14, 2018 •

edited

Loading