README.md

@@ -24,6 +24,7 @@ Feature request? Check the past discussions to see if it has been brough up prev
 - [Aloisdg's cookbook](https://tambouille.vercel.app/) - with pictures and recipes!
 - [GautierArcin's demo with next translate](https://tailwind-nextjs-starter-blog-seven.vercel.app/) - includes translation of mdx posts, [source code](https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate)
 - [David Levai's digital garden](https://davidlevai.com/) - customized design and added email subscriptions
+- [Thinh's Corner](https://thinhcorner.com/) - [customized layout](https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js) with sticky side table of contents
 
 Using the template? Feel free to create a PR and add your blog to this list.
 
@@ -106,6 +107,8 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 `tailwind.config.js` and `css/tailwind.css` - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.
 
+`css/prism.css` - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. [prism themes](https://github.com/PrismJS/prism-themes).
+
 `components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons uses [heroicons](https://heroicons.com/).
 
 `components/MDXComponents.js` - pass your own JSX code or React component by specifying it over here. You can then call them directly in the `.mdx` or `.md` file. By default, a custom link and image component is passed.

components/Pre.js

@@ -14,7 +14,7 @@ const Pre = (props) => {
   }
   const onCopy = () => {
     setCopied(true)
-    navigator.clipboard.writeText(textInput.current.innerText)
+    navigator.clipboard.writeText(textInput.current.textContent)
     setTimeout(() => {
       setCopied(false)
     }, 2000)

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Introducing Tailwind Nextjs Starter Blog'
 date: '2021-01-12'
-lastmod: '2021-08-08'
+lastmod: '2021-09-08'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
@@ -29,6 +29,8 @@ Feature request? Check the past discussions to see if it has been brough up prev
 - [My personal blog](https://www.timlrx.com) - modified to auto-generate blog posts with dates
 - [Aloisdg's cookbook](https://tambouille.vercel.app/) - with pictures and recipes!
 - [GautierArcin's demo with next translate](https://tailwind-nextjs-starter-blog-seven.vercel.app/) - includes translation of mdx posts, [source code](https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate)
+- [David Levai's digital garden](https://davidlevai.com/) - customized design and added email subscriptions
+- [Thinh's Corner](https://thinhcorner.com/) - [customized layout](https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js) with sticky side table of contents
 
 Using the template? Feel free to create a PR and add your blog to this list.
 
@@ -111,6 +113,8 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 `tailwind.config.js` and `css/tailwind.css` - contain the tailwind stylesheet which can be modified to change the overall look and feel of the site.
 
+`css/prism.css` - controls the styles associated with the code blocks. Feel free to customize it and use your preferred prismjs theme e.g. [prism themes](https://github.com/PrismJS/prism-themes).
+
 `components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons uses [heroicons](https://heroicons.com/).
 
 `components/MDXComponents.js` - pass your own JSX code or React component by specifying it over here. You can then call them directly in the `.mdx` or `.md` file. By default, a custom link and image component is passed.

data/blog/new-features-in-v1.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'New features in v1'
-date: 2021-08-07T15:32:14Z
+date: 2021-09-08T15:32:14Z
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
@@ -38,6 +38,9 @@ Tailwind includes great default color palettes that can be used for theming your
 
 Migrating from v1? You can revert to the previous theme by setting `primary` to `colors.sky` (Tailwind 2.2.2 and above, otherwise `colors.lightBlue`) and changing gray to `colors.coolGray`.
 
+From v1.1.2+, you can also customize the style of your code blocks easily by modifying the `css/prism.css` stylesheet. Token classnames are compatible with prismjs
+so you can copy and adapt token styles from a prismjs stylesheet e.g. [prism themes](https://github.com/PrismJS/prism-themes).
+
 ## Xdm MDX compiler
 
 We switched the MDX bundler from [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) to [mdx-bundler](https://github.com/kentcdodds/mdx-bundler).

package-lock.json

@@ -8243,9 +8243,9 @@
       }
     },
     "rehype-prism-plus": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-0.1.0.tgz",
-      "integrity": "sha512-fiWlSvK0txQnCqqJ4suI/WG/LIqNKXyG8gTujEe1KCX8suITmo6c9wVKd8Q00QrkKL8Q6KdbMWqK0AKz28ICjQ==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-1.0.0.tgz",
+      "integrity": "sha512-CCMaW3n40FqBfAnl/hEyQqecRNETDTlWJ6SH6SEQhA8Fy2uJp58gK2VeYO1BOmwrliVckEliOVwt19RikRdV4A==",
       "requires": {
         "hast-util-to-html": "^8.0.1",
         "hast-util-to-string": "^2.0.0",

package.json

@@ -29,7 +29,7 @@
     "reading-time": "1.3.0",
     "rehype-autolink-headings": "^6.0.0",
     "rehype-katex": "^6.0.0",
-    "rehype-prism-plus": "^0.1.0",
+    "rehype-prism-plus": "^1.0.0",
     "rehype-slug": "^5.0.0",
     "remark-footnotes": "^4.0.0",
     "remark-gfm": "^2.0.0",