v0.6.0

.gitpod.yml

@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run dev
+
+

examples/contentlayer/package.json

@@ -10,9 +10,9 @@
   "dependencies": {
     "@code-hike/mdx": "^0.5.2",
     "@types/node": "^17.0.30",
-    "contentlayer": "latest",
-    "next": "^12.1.0",
-    "next-contentlayer": "latest",
+    "contentlayer": "0.2.5",
+    "next": "^12.1.5",
+    "next-contentlayer": "0.2.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

packages/mdx/dev/content/comment-annotations.mdx

@@ -20,22 +20,22 @@ function adipiscing(...elit) {
 console.log("hey")
 ```
 
-Same with other annotations like `bg` and `box`.
+Same with other annotations like `mark` and `box`.
 
 ```js
-// bg(1:2)
+// mark(1:2)
 function foo() {
-  // box[6:9]
+  // mark[6:9] mark-box
   console.log("hover me")
   return 8
 }
 ```
 
-You can pass a string parameter to comment annotations. For `bg` and `box`, it will be used as a color.
+You can pass a string parameter to comment annotations. For `mark` and `box`, it will be used as a color.
 
 ```js index.js
 function lorem(ipsum, dolor = 1) {
-  // bg(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
+  // mark(1:3) mark-red-background
   const sit = ipsum == null && 0
   dolor = sit - amet(dolor)
   return sit ? consectetur(ipsum) : []
@@ -47,7 +47,7 @@ function lorem(ipsum, dolor = 1) {
 // å
 function adipiscing(...elit) {
   console.log(elit)
-  // box[19:36] aqua
+  // mark[19:36]
   return elit.map(ipsum => ipsum.sit)
 }
 ```
@@ -85,7 +85,7 @@ def lorem(ipsum, dolor = 1):
 ```bash
 function lorem(ipsum, dolor = 1) {
   # focus(1:3)
-  # box[3:7]
+  # mark[3:7]
   local sit=0
   # label something something
   dolor=$((sit - amet(dolor)))

packages/mdx/dev/content/empty-codeblocks.mdx

@@ -0,0 +1,107 @@
+# Spotlight
+
+<CH.Spotlight>
+
+```text
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+---
+
+```text focus=1:5
+
+```
+
+focus=1:5
+
+---
+
+```text focus=1,2,3
+
+```
+
+focus=1,2,3
+
+---
+
+```text focus=2[1:6]
+
+```
+
+focus=2[1:6]
+
+</CH.Spotlight>
+
+# Scrolly
+
+<CH.Scrollycoding>
+
+```text
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+focus=1:5
+
+---
+
+```text focus=1,2,3
+
+```
+
+focus=1,2,3
+
+---
+
+```text focus=2[1:6]
+
+```
+
+focus=2[1:6]
+
+</CH.Scrollycoding>
+
+# Slides
+
+<CH.Slideshow>
+
+```text
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+focus=1:5
+
+---
+
+```text focus=1,2,3
+
+```
+
+focus=1,2,3
+
+---
+
+```text focus=2[1:6]
+
+```
+
+focus=2[1:6]
+
+</CH.Slideshow>

packages/mdx/dev/content/section.mdx

@@ -28,7 +28,7 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum [dolore](f
 
 Lorem dolor sit amet, [javascript](focus://index.js#2:3) adipiscing elit, sed do eiusmod [styles](focus://styles.css#2:3) incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
-<CH.Code>
+<CH.Code lineNumbers={true}>
 
 ```js index.js
 function lorem(ipsum, dolor) {

packages/mdx/dev/content/test.mdx

@@ -1,15 +1,124 @@
-Lorem ipsum dolor sit amet. _`console.log("foo bar")`_.
+Annotations allow you to change how the code is displayed and also to add interactivity.
 
-Lorem ipsum dolor sit amet. `console.log("foo bar")`.
+<CH.Spotlight lineNumbers={true}>
 
-_`console.log("foo bar")`_
+````mdx mark=1[7:13],5[1:7]
+```py focus=2
+print(1)
+print(2)
+print(3)
+# focus
+print(4)
+print(5)
+```
+````
 
-_`console.log("foo bar")`_
+There are two ways to add annotations:
 
-X <CH.InlineCode>console.log("foo bar")</CH.InlineCode>
+---
 
-Lorem ipsum `var x = 1`
+```mdx mark=1[7:13],5[1:7] focus=1
 
-_Lorem ipsum `var x = 1`_
+```
 
-**`console.log("foo bar")`**
+- using the codeblock metastring
+
+---
+
+```mdx mark=1[7:13],5[1:7] focus=5
+
+```
+
+- using comments inside the code
+
+</CH.Spotlight>
+
+_`focus`_ is only one of the possible annotations. The full list is:
+
+- _`focus`_: keep the targeted code bright while dimming the rest
+- _`mark`_: add a background color to the targeted tokens
+- _`link`_: add links inside the code
+
+First let's see the syntax to target different parts of the code.
+
+## Targeting lines and columns
+
+<CH.Spotlight maxZoom={1.5} lineNumbers={true} >
+
+<CH.Code lineNumbers={true}>
+
+```text
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+</CH.Code>
+
+---
+
+```text focus=2
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+To select a specific line, use the line number:
+_`focus=2`_
+
+---
+
+```text focus=3:5
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+To select a range of lines use a colon:
+_`focus=3:5`_
+
+---
+
+```text focus=5[3:6]
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+Select a range of column from a line using brackets:
+_`focus=5[3:6]`_
+
+---
+
+```text focus=1,3:5,7[1:4,7:9]
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+123456789
+```
+
+Combine selectors using a comma separated list:
+_`focus=1,3:5,7[1:4,7:9]`_
+
+</CH.Spotlight>
+
+## Comment syntax

packages/mdx/pages/styles.css

@@ -36,3 +36,19 @@ div#__next > div {
 .annotation-class span {
   text-decoration: line-through;
 }
+
+.mark-red-background {
+  background: #550000 !important;
+}
+
+.mark-red-background .ch-code-multiline-mark-border {
+  background: #bb0000 !important;
+}
+
+.mark-box {
+  background: #000 !important;
+}
+
+.mark-box * {
+  color: #0f0 !important;
+}

packages/mdx/pages/themes.tsx

@@ -9,7 +9,7 @@ const mdx = `
 
 <CH.Code>
 
-~~~json package.json
+~~~json package.json mark=2[12:23]
 {
   "name": "package.json"
 }
@@ -31,6 +31,7 @@ function PostPage() {
 
 ~~~js pages/alpha.ts
 function AlphaPage() {
+  // mark
   return 1
 }
 ~~~

packages/mdx/src/index.scss

@@ -53,3 +53,16 @@
 .ch-section-link[data-active="true"] * {
   text-decoration-thickness: 1.5px;
 }
+
+.ch-code-inline-mark {
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.15rem 0.1rem;
+  margin: 0 -0.15rem;
+}
+
+.ch-code-multiline-mark-border {
+  width: 3px;
+  height: 100%;
+  position: absolute;
+  left: 0;
+}