 ✨. Just before 2022 ended, Sanity took 

. It was perfect timing for me, as I was working on the launch of this very site.

I used the new Sanity CLI to generate my site's CMS as usual, with a few new steps from v3. The CLI was able to pre-generate a lot of the common schema you'd find in a blog thanks to Sanity's template - `Post`, `Author`, and `Category` were mostly ready to go. 

One of the things that is a must-have in a coding blog is, well, the ability to display code in a blog post. This was something I needed to create that wasn't added out of the box. Depending on how you look at it, it is the joy and the peril of having a highly customizable headless CMS.

As someone that only had rudimentary Sanity knowledge and which was only limited Studio v2, it proved to be more difficult than I thought.

Although I find Sanity's documentation great 90% of the time, I find that their how-tos can assume a lot about the knowledge you hold going into it. Sometimes, they can only get you part of the way to a solution if you're new. Plus, as with any software overhaul and launch, Google and their site have a spattering of deprecated docs. Some of the new ways of doing things can be a bit hard to find.  

So, let's put the pieces together to add the Code Input block to your Sanity v3 project's Block content schema.

registering schemas with helper functions

Querying data with GROQ and your fetch method of choice. Generally working within the Sanity Content Lake.

⭐️ Your project already set up with Sanity.io v3. Here's 

 if you haven't already. This article also assumes you're using NextJS with 

What we need to do to know that work is done.

: There must be a way that I can easily add raw code to my blog posts in Sanity Studio when writing, as a block in the WYSIWYG editor. In Sanity terms, this is known as the 

: This is a readability essential to me. I need syntax highlighting to be automatically applied according to the language I specify. At minimum I know I will need JavaScript, JSX, HTML, CSS, Liquid, and SASS support. Bonus points for being able to pick the theme, lol. 

: The way I write this new feature must fit in with my project structure, offer custom styling, and full control over how it renders on the front end.

Now to break those down, while thinking in code:

We'll need 3 external tools to help us with this as outlined above.

The plugin for the Code Input block we'll be using is 

. It's official and quite fantastic. We'll also be referencing that readme a lot.

The best package for rendering portable text in React is 

Overall, this process is straightforward. But I had a lot trouble with rendering the Code Input in NextJS, and it took me much too long to realize I was using the wrong npm package

that was commonly used in V2. The bottom line is 

 to render any and all portable text on your blog post.

The context for above is that I started building my new site and learning Sanity in general before V3 was released, but after V2 had been out for quite some time. I found this 

 on Sanity's site when it came time to render my posts and began to use it. It is called `react-portable-text` and it worked for my needs in V2.

The correct package to use for rendering all portable text in V3 is `@portabletext/react`. I mistakenly thought they were the same thing, as they have near identical ways of calling the rendering `PortableText` component and passing it the same `components` prop (more on this later). I was able to swap packages once I realized. 

The package I'll be using for syntax highlighting is 

, since it was referenced in the @sanity/code-input readme example. If you have another you like to use, go for it - just make sure it's compatible with  @sanity/code-input.

Registering the Code Input inside our Content Block Schema

Navigate to your project's Sanity folder and install the Code Input plugin.

Now to register that newly installed plugin inside our Sanity config, in the `plugins` array in the `defineConfig()` function. This will expose the plugin to our schema so it can use it.

Let's open up our blog post schema. Mine was conveniently pre-generated by Sanity CLI and looks something like this:

Below the second `defineArrayMember()` function, we're going to add another call of it to register the Code Input component in the block editor.

What this does is register a new plugin whose type is `code`. I've included some options while following the documentation on the 

 page. `language` just defines what default language will be selected when you add a new code input block. The `languageAlternatives` is important - this is where we are defining which languages we want to support. Add in whichever languages you'd like to, 

which are supported by your syntax highlighter.



You can find a list of languages refractor supports 

At this point, run `npm run dev` in your Sanity folder and poke around. Navigate to a post in Sanity Studio and your code block option should show up! Fantastic.

Now, let's work on rendering our post, along with the code inputs, in our NextJS front end.

Now, this is where your process may slightly deviate from mine, especially if you aren't using NextJS. That's okay. Our main goal is taking the portable text data of our raw code content that Sanity is generating, and control how it renders to the page.

 to create my post pages from a file named `[slug].js`. 

Here's a basic example of how the blog post content is currently being rendered on the page:


Here, we're using the `PortableText` component imported from the package mentioned earlier. This code is assuming you've already passed in your post data from Sanity as props.

You may notice your code either is rendering with no styling as text, or possibly not rendering at all. First, we must create a component that will handle the rendering of our code. Second, we must utilize the `PortableText` `components` functionality.

This is the component that will render once `PortableText` finds a code input in your content.

In whichever folder you have that holds your front end components, create `Code.js`. Below is what mine looks like. Let's go through it piece by piece.

 I've imported all of the files of common languages I use at the top of this file and the main `Refractor` component from Refractor. The imported languages are the same languages we registered in `my-project/my-sanity-folder/schemas/blockContent.js`. 

Then I created an array `languages` to hold all of these variables, which will be iterated over and registered with Refractor's `registerLanguage()` function.

Then you'll pass the Refractor props, which are actually the content of your Code input. For more context, view the tutorial in the Code Inputs readme 

Alright, now it's time to go back to our `Post` page component and let the `PortableText` rendering component know we want to use `Code` for code input blocks.

First, import your `Code` component at the top of the file.

Then, let's create a constant called `components`. It will be an object accepting a key `types` with a value of another object, which will be the name of the HTML element you'd like to control. In this case, that will be `code`. The value will be a function returning your component with its needed props passed in from Sanity data. 

You can read more about the `components` prop 

Huzzah! Your code is rendering with indenting and all of the great formatting we're used to. Except, your favorite IDE themed syntax highlighting is missing even though we've passed `Refractor` the `highlightedLines` prop.

That's because we have to add the theme CSS! Refractor is built with Prism, so all Prism themes will apply nicely.

You can find a 

Once you get the raw CSS, you'll have to add it in whichever way you deem fit for your project. I've added mine via Sass and Tailwind. I created a Sass partial `_text-editor.scss` and pasted the code in there, along with some tweaks for font sizing, font family, and other things here and there.

Here's a snippet I add to all of my Prism themes that I've found helpful. 

Once the CSS is added to your site, that's it! ✨ Bam. You should have a perfectly working code snippet component. Go forth, and write about code. 

The only thing left is to somehow get inline `code formatting like this` to render with a `pre` tag. I'm still researching this, but stay tuned. 

Adding Code Snippets in Sanity Studio v3

I wrote this post wayyy back when my personal site was powered by 

. But this is still worth checking out if you're interested in Jekyll site creation :)

Everywhere I’ve looked, many have been saying the same thing: “BUILD A BLOG. Document your process. Write things down. You’ll learn from it.” I’m not the best writer, but hey. Alright. I’ll give it a shot.

I asked myself the question we all dread - 

Buzzwords like Jekyll, Gatsby, and Hugo were all over 

. I had no idea what a static site generator was, much less which one was best to use. I poked around a bit, and determined that Jekyll was probably the best way to go for me - the documentation was clear and detailed, and the learning curve of React/Gatsby didn’t sound appealing in my rush to get started. Jekyll uses a templating language called Liquid, and accompanied with Markdown, makes for a pretty powerful CMS.

From here on, I will discuss Jekyll as it pertains to my personal site. The Jekyll Docs have a great 

 you can view if you want to know more about how it works, and what other features are available.

Right out of the box, Jekyll has some powerful tools available at our disposal. I didn’t have to fiddle with Gulp or any other task runners, because Jekyll already auto-compiles Sass and spins up a local development server using the CLI command `$ jekyll serve`. I’m such a fan of how easy it is to get up and going with this CMS.

The includes & layout features encouraged me to keep my code as modular as possible. I used 3 includes throughout my site: head.html, nav.html, and footer.html. The first file held the basic HTML heading - the doctype, the <head>, the various meta tags, and the opening body tag. This saved me a lot of code repetition. The second held my navigation bar, and the ul including all of my nav items. Finally, footer.html was… the footer. I also included the closing </body> tag; I wanted my footer on every page anyway, so I didn’t have to remember to close every body tag in the individual layout files.

So with the main HTML skeleton taken care of, I was able to focus entirely on main content. Now I’ll share some fun stuff Jekyll has to offer that helped me build my blog.

Using Conditionals for Dynamic Navigation

My main goals for this site were documenting my learning process and branding myself into the dev world. So, keeping it simple would be my best bet, for the time being. I only had 2 pages (besides the home page) in mind. I should probably write a bit about who I actually am, and include a page on how to contact me in case any of my 

However, who knows if I wanted to expand on my site in the future. Maybe I would want to add a portfolio page sometime, with some projects. Maybe a gallery page for my film photography. Maybe a page just for my cat. Alas, I’m lazy. Every time I add a new page, I don’t want to add in a new <li> and edit my navigation file every time I expand. I want to focus on content. So, I discovered the power of 

 and checked out what I had at my disposal. Yay! For loops! No problem. I’ll generate some <li>s by looping through every page.

The above code basically says: for every single HTML page in my Jekyll site, make a list item with the linked title of the page, and display it in the navigation bar.

…but, it didn’t work. Not like I wanted it to. It literally put 

 page in the main navigation - including the archive pages for each of my tags. It looked something like this:

So on, and so forth. Definitely NOT what I wanted. I read a little more, and found a neat work around.

The key is this conditional if page.navi. Jekyll allows for custom variables in front matter - anything you want. navi is one of those custom variables. In the front matter of each page I wanted in the navigation, I set a custom variable navi: true. The code now will only make a <li> if the variable is present in the front matter.

Now, any time I create a new page, I can just put in that variable and I’m good to go!

My first impressions of Jekyll was pretty positive, however, there are a few things missing. One is a decent archiving & tagging system.

I could define a tag variable in front matter, no problem. However, I wanted the tags to be clickable, and when clicked take you to a page that listed all the posts with that respective tag. So, I found a neat plugin called 

All I had to do was include the following in my config.yml file:

I defined a layout for each archive page, and specified the format and styling for which each post would be displayed. After a quick for loop, the plugin did the rest.

Even though ways to search by year, month, day, category, etc exists I’m pretty content with pages just for individual tags. As I write more posts, my plans are to add pagination, additional archive options, and a search feature. Until then, I’ll keep writing!

 are quite a match. However, I chose to deploy my site with 

 for a couple of reasons. One is that Github Pages does not support (most) Jekyll plugins - so I couldn’t get the archive feature I wanted. I felt that it limited me in a lot of ways.

 which allowed it to integrate into my Git workflow seamlessly. I didn’t have to sacrifice that GitHub benefit. Every time I use git push, Netlify automatically builds a new version of my site. Second, Netlify has an awesome 

. All I have to do is add a netlify attribute to my form HTML, and I can receive submissions, no back end or API required! So, that’s dang cool.

Jekyll is a great and powerful tool that I’m happy I explored. I know I have only just barely scratched the surface; I’ve probably also used some things a bit wrong. I’m just excited to see what else it can do, and learn as much as I can. I wouldn’t personally use it for a freelance client’s website, as it’s a bit more developer oriented. However I can see it being great for micro sites, quick static mockups, and a variety of other possibilities.

My Personal Site & Jekyll

https://lastfm.freetls.fastly.net/i/u/34s/b503d145d1b55c27fe5debb9a33d7765.jpg

https://lastfm.freetls.fastly.net/i/u/64s/b503d145d1b55c27fe5debb9a33d7765.jpg

https://lastfm.freetls.fastly.net/i/u/174s/b503d145d1b55c27fe5debb9a33d7765.jpg

https://lastfm.freetls.fastly.net/i/u/300x300/b503d145d1b55c27fe5debb9a33d7765.jpg

breezy fasano

Last listened to

Currently drinking

latest writings & happenings

Adding Code Snippets in Sanity Studio v3

My Personal Site & Jekyll