DEV Community: Alan W. Smith

Add Line Numbers to Prismjs Code Blocks in a Next.js Project

Alan W. Smith — Mon, 10 Jan 2022 20:57:41 +0000

(The original version of this post is on my site if you'd like to read it there)

None of the posts I found on the Prism syntax highlighter show how to turn on line numbers in a Next.js project.

In the spirit of sharing so others don't have to hack around like I did, here's how to do it:

1. The Install

Assuming you already have your Next.js project setup and ready, install Prism with:

npm install prismjs

2. The Full Code Example

Next up, the code. Here's a fully functional example you can use in a file (e.g. 'pages/prism-example.js'). It includes a theme (okaidia), a language (jsx), and line numbering. (Details further below.)

import { useEffect } from 'react'

import Prism from 'prismjs'

import 'prismjs/themes/prism-okaidia.css'
import 'prismjs/components/prism-jsx.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

export default function Page() {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  const codeSample = `<div className="example">
  {Math.random()}
</div>`

  return (
    <main>
      <pre className="line-numbers">
        <code className="language-jsx">{codeSample}</code>
      </pre>
    </main>
  )
}

Using that will output a highlighted and numbered code snippet that looks like this.

3. The Details

Here's how it all works:

Prism is made available with:

import Prism from 'prismjs'

The theme comes from:

import 'prismjs/themes/prism-okaidia.css'

This is one of the default themes Prism ships with. The others are located in the project's 'node_modules/prismjs/themes' directory. They are:

Switch out the import call to point to whichever one you prefer.

There are also ways to make and use custom themes as well. That's left as an exercise for the reader.

Be default, Prism loads syntax highlighting for "markup, css, clike, and javascript". Other languages need to be imported explicitly. In the example, I'm adding JSX with:

import 'prismjs/components/prism-jsx.js'

This is what lets us call the language-jsx class in our <code> tags.

(Look in your project's 'node_modules/prismjs/components' directory for all the available languages.)

Prepping to use the line numbers is done with these two import statements:

import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

There's a bunch of other plugins available in the project's 'node_modules/prismjs/plugins' like copy-to-clipboard, line-highlight, etc... that are worth looking at too.

Actually getting Prism to do its thing is done with Prism.highlightAll() in useEffect() with these lines:

useEffect(() => {
    Prism.highlightAll()
}, [])

The last two parts that turn on the line numbers and set the language go hand in hand. They're done with className="line-numbers" and className="language-jsx" in:

<pre className="line-numbers">
    <code className="language-jsx">{codeSample}</code>
</pre>

One last note. I use next-mdx-remote for my site. I make code blocks with code fences (i.e. three backticks in a row on the before and after the code). There's no way in the markdown to send a signal to turn on the line numbers in the <pre> tag. I work around that by replacing the default components like this:

<MDXRemote
  {...source}
  components={{
    pre: (props) => (
      <pre className="line-numbers">{props.children}</pre>
    ),
  }}
/>

That adds the className="line-numbers" call to all my <pre> tags.

The Review

Now that you've seen the details, here's that code sample one more time.

import { useEffect } from 'react'

import Prism from 'prismjs'

import 'prismjs/themes/prism-okaidia.css'
import 'prismjs/components/prism-jsx.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

export default function Page() {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  const codeSample = `<div className="example">
  {Math.random()}
</div>`

  return (
    <main>
      <pre className="line-numbers">
        <code className="language-jsx">{codeSample}</code>
      </pre>
    </main>
  )
}

Prism also offers line highlighting. There isn't a way to use it with default markdown code blocks since the line numbers are dependent on the specific code snippets. Getting those in place (along with some of the other Prism plugins) requires making new, custom components.

But, that's for another time. For now, syntax highlighting with line numbers has me taken care of.

Alan W. Smith runs his site and a podcast. He's also on Twitter and Twitch from time to time playing around with ideas.alanwsmith.com, jacktorrance.blog, Mono Crack, and SurfTech.tv

Practicing On The Small Stuff

Alan W. Smith — Wed, 14 Oct 2020 15:51:31 +0000

[originally posted on alanwsmith.com by @TheIdOfAlan]

I spent a couple hours last night modifying a script to do the same thing it was already doing.

Refactoring, but not really. I was trying something different. Trying to get better at test-driven development. Testing everything.

The script is small. Just 100 lines. I could have written it in half that and been done in 20 minutes. Instead, I’ve spent hours on it. I’m not only okay with that, I’m embracing it. I’m practicing. Practicing on the small stuff so my skills are sharp when I get to the big stuff.

I felt foolish at first, spending so much time on such a small script. But, I’m over that. It’s like a musician doing scales. It’s how you get the notes in your fingers and the chords in your head.

It’s how you get better.

Explicit Over Implicit: More Code Is Better

Alan W. Smith — Mon, 12 Oct 2020 21:43:28 +0000

Originally posted on alanwsmith.com by @TheIdOfAlan

I’m looking for examples to use as examples (e.g. “lists of names, lists of animals, simple math equations, etc.."). Turns out, it’s hard to look up sets of examples for coding without getting examples of coding¹. That’s fine, even if it’s a little meta.

During my search I found this post titled Coding Best Practices.

The bullet points make sense. Use consistent indentation, follow the DRY principle, etc… But, I side-eyed the “Keep The Code Simple” example². It says this:

def numbers_are_in_range(*, a, b, c):
    if a < 0 and b > 0 and c == 0:
        return True
    else:
        return False

should be written like this:

def numbers_are_in_range(*, a, b, c):
    return a < 0 and b > 0 and c == 0

Fewer lines? Sure.

Simpler? Not so much.

That code is harder to understand.

Implicit returns (like the second snippet) take more brain power to deal with than explicit ones (like the first example)³. In this case, you know at a glance that the first snippet will return one of two possible values: True or False. In the second snippet, you have to mentally walk through the formula to reason out what the possibilities are.

You don’t notice the effort when you’re writing the initial code. The context is already in your head. It’s every other time we use it that we’ll feel the impact. We spend infinitely more time in the future working on our code than when we first write it. It’s in our best interest to make things as clear (and as explicit) as possible for our future selves.

Equating fewer lines with simpler code is an easy mistake to make. But, it’s not always the case. Don’t be afraid of those extra lines when they add clarity. They’re your friends.

Footnotes

I’ve realized that I can go to the wonderful exercism.io for examples of examples.
Yep. I translated the example into python functions. And, while I don’t want to get into it in this post, I wonder if there’s not be a cleaner way to code the conditional as well as.
Don’t just take my word for it. The Zen of Python’s second line is literally:

Explicit is better than implicit.

Create an AWS IAM Policy That Lets Users Manage Their Own Credentials and MFA

Alan W. Smith — Mon, 17 Jun 2019 20:32:12 +0000

Originally published on alanwsmith.com

I've been digging into Amazon Web Services (AWS)¹ user administration. One of my first goals was to create a user, send them their password, and let them manage the rest of their credentials without me.

The various credential types are located under the "My Security Credentials²" section for each user. They are:

IAM Password for console access
Access keys for CLI, SDK, & API access
Multi-factor authentication (MFA)
X.509 certificate
SSH Keys
HTTPS Git credentials for AWS CodeCommit

Amazon provides five built-in IAM policies that provide access to the credential sets. The first one, IAMFullAccess, provides full admin control over the Identity and Access Management (IAM) service. Not only does it allow users to manage their own details, it allows them to create, delete, and otherwise mess with any other user, group, policy, role, etc... Not something to give a non-admin user.

A second built-in AWS policy is IAMReadOnlyAccess. It does just what it says on the tin, providing read-only access to the various parts of the IAM dashboard. So, no help there when it comes to letting users set their credentials.

The last three built-in policies (and what they correspond to) are:

IAMSelfManageServiceSpecificCredentials - allows users to update their HTTPS Git credentials for AWS CodeCommit
IAMUserChangePassword - allows users to update their IAM Password for console access
IAMUserSSHKeys - allows users to update their SSH Keys

Half way there, but we're still left without the ability to manage "Access keys for CLI, SDK, & API access", "Multi-factor authentication (MFA)", and "X.509 certificate". Since what I was looking for wasn't built-in, I went about building a custom policy myself.

After referencing a half dozen web pages, IAM docs³ and just as many StackOverflow⁴ pages, I came up with the following policy definition. It provides users with control of all six sets of credentials. It also required Multi-Factor Authentication (MFA)⁵ and locks users out of all AWS services until it's set up.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": ["iam:ListVirtualMFADevices"],
      "Resource": "*"
    },
    {
      "Sid": "AllowUsersToManageCoreCredentials",
      "Effect": "Allow",
      "Action": [
        "iam:*AccessKey*",
        "iam:ChangePassword",
        "iam:GetUser",
        "iam:*ServiceSpecificCredential*",
        "iam:*SigningCertificate*"
      ],
      "Resource": ["arn:aws:iam::*:user/${aws:username}"]
    },
    {
      "Sid": "AllowIndividualUserToListOnlyTheirOwnMFA",
      "Effect": "Allow",
      "Action": ["iam:ListMFADevices"],
      "Resource": [
        "arn:aws:iam::*:mfa/*",
        "arn:aws:iam::*:user/${aws:username}"
      ]
    },
    {
      "Sid": "AllowIndividualUserToManageTheirOwnMFA",
      "Effect": "Allow",
      "Action": [
        "iam:CreateVirtualMFADevice",
        "iam:DeleteVirtualMFADevice",
        "iam:EnableMFADevice",
        "iam:ResyncMFADevice"
      ],
      "Resource": [
        "arn:aws:iam::*:mfa/${aws:username}",
        "arn:aws:iam::*:user/${aws:username}"
      ]
    },
    {
      "Sid": "AllowIndividualUserToDeactivateOnlyTheirOwnMFAOnlyWhenUsingMFA",
      "Effect": "Allow",
      "Action": ["iam:DeactivateMFADevice"],
      "Resource": [
        "arn:aws:iam::*:mfa/${aws:username}",
        "arn:aws:iam::*:user/${aws:username}"
      ],
      "Condition": {"Bool": {"aws:MultiFactorAuthPresent": "true"}}
    },
    {
      "Sid": "AllowIndividualUserToManageTheirSSHCredentials",
      "Effect": "Allow",
      "Action": [
        "iam:DeleteSSHPublicKey",
        "iam:GetSSHPublicKey",
        "iam:ListSSHPublicKeys",
        "iam:UpdateSSHPublicKey",
        "iam:UploadSSHPublicKey"
      ],
      "Resource": "arn:aws:iam::*:user/${aws:username}"
    },
    {
      "Sid": "BlockMostAccessUnlessSignedInWithMFA",
      "Effect": "Deny",
      "NotAction": [
        "iam:CreateVirtualMFADevice",
        "iam:EnableMFADevice",
        "iam:ListMFADevices",
        "iam:ListUsers",
        "iam:ListVirtualMFADevices",
        "iam:ResyncMFADevice"
      ],
      "Resource": "*",
      "Condition": {"BoolIfExists": {"aws:MultiFactorAuthPresent": "false"}}
    }
  ]
}

Speaking of MFA, it's easy to use in the web console. Using it on the command line isn't as straight forward. For details on the basic process check out this video from Amazon. (If you're like me, this looks like a prime opportunity to write a little script to help automate the process. That's left as an exercise for the reader.)

Footnotes

One of the marvels of the modern world, Amazon Web Services is the "Cloud Computing" platform that's eating the software world.
Every user has a My Security Credentials section they can use to manage their various credentials, assuming they have permissions to do so. Which, of course, is what this post is all about.
Amazon's documentation is some of the best I've ever seen. The IAM docs are no exception (despite not having the specific thing I was after).
Another marvel of the modern world, StackOverflow is the place to go for all your programming question wants and needs. (Though, again, they didn't have what I was looking for. At least, not until I post this there as well.)
Multi-factor Authentication is the way to go. The basic idea is that logging in requires "something you have and something you know". The thing you know is your password. The thing you have is some type of device (or app on your phone) that spits out random numbers every 30 seconds. If you don't have the proper numbers to go along with your password, you can't login. The reason this is important is if your password gets stolen, the bad guys can't get in but you still can with your MFA device.