Code Hike

Build rich content websites with Markdown and React

Quick Start

Try it online on StackBlitz. Or clone the Code Hike starter:

npx create-next-app -e https://github.com/code-hike/v1-starter

Documentation

See https://codehike.org/docs

v0.9.0 (Mon Jun 12 2023)

🚀 Enhancement

• @code-hike/mdx
  • Refactor themes #370 (@pomber)

🐛 Bug Fix

• @code-hike/mdx
  • from annotation with line range #376 (@pomber)
  • Fix dimensions when code starts hidden #373 (@pomber)
  • Merge main #365 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.8.3 (Wed May 03 2023)

🐛 Bug Fix

• @code-hike/mdx
  • Update nextra example #363 (@pomber)
  • Fix empty lines in expand code browser #362 (@pomber)
  • Add trigger position config #360 (@pomber)
  • Autolink option #358 (@pomber)
  • Add copy button to multiline mark #357 (@pomber)
  • Merge Main #349 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.8.2 (Tue Apr 11 2023)

🐛 Bug Fix

• @code-hike/mdx
  • Update lighter #347 (@pomber)
  • add outline-color to button-reset mixin #345 (@Mantish)
  • fix: use semantic elements #341 (@mfranzke @pomber)
  • Merge main #339 (@pomber)

Authors: 3

• @Mantish
• Maximilian Franzke (@mfranzke)
• Rodrigo Pombo (@pomber)

v0.8.1 (Fri Mar 24 2023)

🐛 Bug Fix

• @code-hike/mdx
  • Use new MDX grammar #337 (@pomber)
  • misc: fix typo in Sildeshow #329 (@yangshun)
  • Catch lighter error #318 (@pomber)
  • Merge main #315 (@pomber)

Authors: 2

• Rodrigo Pombo (@pomber)
• Yangshun Tay (@yangshun)

v0.8.0 (Mon Jan 16 2023)

🚀 Enhancement

• @code-hike/mdx
  • Use @code-hike/lighter #308 (@pomber)

🐛 Bug Fix

• add/astro-example #282 (@JohnDaly)
• @code-hike/mdx
  • Fix line number horizontal shift #278 (@pomber)
  • Merge main #275 (@pomber)

Authors: 2

• John Daly (@JohnDaly)
• Rodrigo Pombo (@pomber)

v0.7.4 (Mon Aug 22 2022)

🐛 Bug Fix

• Gatsby example #273 (@pomber)
• @code-hike/mdx
  • rows prop when you have two panels #269 (@pomber)
  • Fix focus height on transitions #268 (@pomber)
  • Force content box in code-wrapper #267 (@pomber)
  • Merge main #264 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.7.3 (Mon Aug 08 2022)

🐛 Bug Fix

• @code-hike/mdx
  • Change code height with rows #262 (@pomber)
  • Change plugin type #256 (@pomber)
  • feat(#217): CH.Slideshow autoPlay and autoPlayLoop #250 (@brianespinosa @pomber)
  • Add lang attribute #253 (@pomber)
  • feat(#246): Add onChange and initialSlideIndex props to CH.Slideshow #248 (@brianespinosa)
  • Fix typescript module resolution #249 (@pomber)
  • feat(244): Allow Slideshow controls to autoFocus #245 (@brianespinosa @pomber)
  • Merge main #243 (@pomber)

Authors: 2

• Brian Espinosa (@brianespinosa)
• Rodrigo Pombo (@pomber)

v0.7.2 (Wed Jul 27 2022)

🐛 Bug Fix

• @code-hike/mdx
  • Remove overscroll-behavior #241 (@pomber)
  • Merge main #236 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.7.1 (Mon Jul 25 2022)

🐛 Bug Fix

• @code-hike/mdx
  • Add copy button to code browser #234 (@pomber)
  • Set longestLineRef once #233 (@pomber)
  • Merge main #231 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.7.0 (Thu Jul 21 2022)

🚀 Enhancement

• @code-hike/mdx
  • Static scrollycoding #223 (@pomber)
  • Add previews in steps #221 (@pomber)

🐛 Bug Fix

• Update docusaurus #228 (@pomber)
• @code-hike/mdx
  • Invert staticMediaQuery #229 (@pomber)
  • Add preview frameless prop #225 (@pomber)
  • Update nextjs example #224 (@pomber)
  • Merge main #220 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.6.2 (Tue Jul 05 2022)

🐛 Bug Fix

• @code-hike/mdx
  • Better scrollbars #216 (@pomber)
  • Improve code-browser #215 (@pomber)
  • Add from annotation #214 (@pomber)
  • Add skipLanguages config #213 (@pomber)
  • Styling props #208 (@pomber)
  • Merge main #205 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.6.1 (Mon Jun 20 2022)

🐛 Bug Fix

• @code-hike/mdx
  • Stable annotations #203 (@pomber)
  • Merge main #201 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.6.0 (Wed Jun 15 2022)

🚀 Enhancement

• @code-hike/mdx
  • Multiline mark annotation #199 (@pomber)

🐛 Bug Fix

• @code-hike/mdx
  • Fix Safari 14 playground #195 (@pomber)
  • Empty codeblocks #192 (@pomber)
  • Merge main #190 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.5.2 (Wed May 25 2022)

🐛 Bug Fix

• @code-hike/mdx
  • Fix rose pine themes #188 (@pomber)
  • Better playground #187 (@pomber)
  • Playground #185 (@pomber)

🏠 Internal

• @code-hike/mdx
  • Modify output of dist folder to merge all .d.ts files #186 (@AeonFr @pomber)
  • Merge main #183 (@pomber)

Authors: 2

• Francisco Cano (@AeonFr)
• Rodrigo Pombo (@pomber)

v0.5.1 (Thu May 19 2022)

🐛 Bug Fix

• @code-hike/mdx
  • Expand button #181 (@pomber)
  • Hide tabs #179 (@pomber)
  • Merge main #176 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.5.0 (Tue May 10 2022)

🚀 Enhancement

• @code-hike/mdx
  • Copy button component #172 (@pomber)
  • Remove target from code links #169 (@pomber)

🐛 Bug Fix

• Contentlayer example #170 (@pomber)
• @code-hike/mdx
  • Better props support for mdx #174 (@pomber)
  • Fix react 18 strict mode #173 (@pomber)
  • v0.4.0 #167 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.4.0 (Thu Apr 28 2022)

🚀 Enhancement

• @code-hike/mdx
  • Monopackage refactor #147 (@pomber)

🐛 Bug Fix

• @code-hike/mdx
  • Fix preview width #165 (@pomber)
  • Python comments support #163 (@pomber)
  • Smart imports #160 (@pomber)
  • Export internals #159 (@pomber)
  • Docusaurus example #158 (@pomber)
  • Rename esm to .mjs #157 (@pomber)
  • Fix longest line trim #155 (@pomber)
  • Browser example #154 (@pomber)
  • Test site #149 (@pomber)

Authors: 1

• Rodrigo Pombo (@pomber)

v0.3.0 (Thu Mar 03 2022)

🚀 Enhancement

• @code-hike/highlighter, @code-hike/mdx, @code-hike/mini-editor, @code-hike/playground, @code-hike/smooth-code
  • Better sections #139 (@pomber)
• @code-hike/mdx, @code-hike/mini-editor, @code-hike/playground, @code-hike/smooth-code, storybook, @code-hike/utils
  • Line numbers #111 (@pomber)
• @code-hike/highlighter, @code-hike/mdx, @code-hike/playground
  • Allow empty lang #103 (@pomber)
• @code-hike/mdx, @code-hike/mini-browser, @code-hike/playground, @code-hike/smooth-code, storybook
  • Slideshow component #99 (@pomber)
• @code-hike/classer, @code-hike/highlighter, @code-hike/mdx, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/playground, @code-hike/script, @code-hike/scroller, @code-hike/smooth-code, storybook, @code-hike/utils
  • Use shiki #77 (@pomber)
• @code-hike/mini-editor, @code-hike/mini-frame, storybook
  • Split editor #67 (@pomber)

🐛 Bug Fix

• Add link #145 (@pomber)
• Update readme.md #145 (@pomber)
• Turn onlyPublishWithReleaseLabel on #34 (@pomber)
• Remove submodule #145 (@pomber)
• Remove comments #145 (@pomber)
• Fix links without href #145 (@pomber)
• Add anchor component #145 (@pomber)
• Add sandpack colors for loading screen #145 (@pomber)
• Add links to csb #145 (@pomber)
• Sandpack alpha-31 #145 (@pomber)
• Split layouts #145 (@pomber)
• Update to sandpack alpha-26 #145 (@pomber)
• Update #145 (@pomber)
• Fix focus margin #145 (@pomber)
• Focus redesign #145 (@pomber)
• Fix media query #145 (@pomber)
• Add media query #145 (@pomber)
• Remove code-sections #145 (@pomber)
• Add props #145 (@pomber)
• Make sticker flex #145 (@pomber)
• Refactor scrollycoding #145 (@pomber)
• Bump sandpack #145 (@pomber)
• Use sandpack alpha-15 #145 (@pomber)
• Add docs #145 (@pomber)
• Remove console log #145 (@pomber)
• Add presets #145 (@pomber)
• Read filenames and lang from mdx #145 (@pomber)
• Extract hike #145 (@pomber)
• Remove extra styles #145 (@pomber)
• Add class to focus icon #145 (@pomber)
• Update sections #145 (@pomber)
• v0.0.0 #145 (@pomber)
• Update site submodule #145 (@pomber)
• Add site submodule #145 (@pomber)
• Remove more submodules #145 (@pomber)
• Remove some submodules #145 (@pomber)
• Yarn upgrade #145 (@pomber)
• Change root scripts #145 (@pomber)
• Add update version command #145 (@pomber)
• Update screencast #145 (@pomber)
• Focus opacity #145 (@pomber)
• Fix zoom #145 (@pomber)
• Use line height #145 (@pomber)
• November update #14 (@pomber)
• Make line width dynamic #145 (@pomber)
• Fix overshot #145 (@pomber)
• Dynamic height in column #145 (@pomber)
• Remove theme from storybook #145 (@pomber)
• Remove extra prev key #145 (@pomber)
• Add wsrun #145 (@pomber)
• Add code story #145 (@pomber)
• Add code map #145 (@pomber)
• Add tokenizer #145 (@pomber)
• Wrap video component #145 (@pomber)
• Add jest #145 (@pomber)
• Update storybook #145 (@pomber)
• Add scale #145 (@pomber)
• Add easing #145 (@pomber)
• Add stagger #145 (@pomber)
• Add smooth-lines package #145 (@pomber)
• Add demo #145 (@pomber)
• Implement column #145 (@pomber)
• Add column package #145 (@pomber)
• Add module #145 (@pomber)
• storybook
  • Delete old packages #146 (@pomber)
  • Use new sandpack #47 (@pomber)
  • Better centering logic #45 (@pomber)
  • Make storybook private #145 (@pomber)
  • Make steps clickable #145 (@pomber)
  • Add hidden param to files #145 (@pomber)
  • Extend files from previous step #145 (@pomber)
  • Remove preset param from mdx steps #145 (@pomber)
  • Update to sandpack to alpha-27 #145 (@pomber)
  • Fix scrollytelling story #145 (@pomber)
  • Add storybook actions #145 (@pomber)
  • Rename stepCode #145 (@pomber)
  • Add sandpack #145 (@pomber)
  • Add small screen styles #145 (@pomber)
  • Add scrollycoding story #145 (@pomber)
  • Change smooth-column easing #145 (@pomber)
  • Move storybook #145 (@pomber)
• @code-hike/mdx
  • Fix quirks mode height #143 (@pomber)
  • Add autoImport setting #137 (@pomber)
  • Fix comment annotations #101 (@pomber)
• @code-hike/smooth-code
  • Reset some code styles #136 (@pomber)
  • Changes style property to fix 'Unsupported style property color-scheme' #134 (@ghoshnirmalya)
  • Fix firefox copypasting #124 (@pomber)
• @code-hike/mdx, @code-hike/mini-editor, @code-hike/playground, @code-hike/smooth-code, @code-hike/utils
  • Better errors #135 (@pomber)
• @code-hike/highlighter, @code-hike/playground
  • Handle invalid language #126 (@pomber)
• @code-hike/smooth-code, @code-hike/utils
  • Selection color from theme #125 (@pomber)
• @code-hike/mdx, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/playground, @code-hike/smooth-code, @code-hike/utils
  • Better default styles #116 (@pomber)
• @code-hike/mdx, @code-hike/playground
  • Fix annotation regex #105 (@pomber)
  • Stop assuming comment annotations #97 (@pomber)
• @code-hike/mini-editor, @code-hike/playground, storybook
  • Smarter editor height #98 (@pomber)
• @code-hike/highlighter, @code-hike/playground, @code-hike/smooth-code, storybook, @code-hike/utils
  • Fix multi-annotation focus string #94 (@pomber)
• @code-hike/mdx, @code-hike/mini-editor, @code-hike/playground
  • Make tabs clickable #86 (@pomber)
• @code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/scroller, @code-hike/sim-user, @code-hike/smooth-code, storybook
  • Add spring config #75 (@pomber)
• @code-hike/mini-editor
  • Fix copy paste #63 (@pomber)
  • Add file name to focus component #145 (@pomber)
  • New smooshpack version #145 (@pomber)
  • Auto resize #145 (@pomber)
  • Cascade code and preview props #145 (@pomber)
  • Add scrollycoding slots #145 (@pomber)
  • Start code-walk refactor #145 (@pomber)
  • Remove console logs #145 (@pomber)
  • Add stateful editor #145 (@pomber)
  • Focus by column #145 (@pomber)
  • Remove code-surfer #145 (@pomber)
  • Change editor padding #145 (@pomber)
  • Add minColumns prop #145 (@pomber)
  • Use vscode theme #145 (@pomber)
  • Add min col width #145 (@pomber)
  • Use line height #145 (@pomber)
  • Change line padding #145 (@pomber)
  • Remove line outline #145 (@pomber)
  • Fix null code #145 (@pomber)
  • Measure longest line for each step #145 (@pomber)
  • Add useMemo #145 (@pomber)
  • Recalculate code height #145 (@pomber)
  • Tween item height #145 (@pomber)
  • Fix transition index #145 (@pomber)
  • Focus extremes #145 (@pomber)
  • Add focus to transtion #145 (@pomber)
  • Add useDimensions #145 (@pomber)
  • Start removing code-surfer #145 (@pomber)
• @code-hike/mini-editor, storybook
  • Fix line jumps #61 (@pomber)
  • Add horizontal center prop #58 (@pomber)
  • Add scrollbars #49 (@pomber)
  • Improve editor tab styles #38 (@pomber)
  • Add scrollycoding mdx #145 (@pomber)
  • Add button property to mini-editor #145 (@pomber)
  • Add stateful editor stories #145 (@pomber)
  • Add focus by column story #145 (@pomber)
  • Add mini-editor stories #145 (@pomber)
• @code-hike/mini-browser
  • Optional browser transition #59 (@pomber)
  • Use link instead of hash to avoid double updates #145 (@pomber)
  • Add url tests #145 (@pomber)
  • Extract mini browser #145 (@pomber)
  • Browser props #145 (@pomber)
  • Remove warnings #145 (@pomber)
• @code-hike/script
  • Add release workflow #32 (@pomber)
  • Add auto #145 (@pomber)
• @code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/scroller, @code-hike/sim-user
  • v0.3.0-next.0 #145 (@pomber)
• @code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/script, @code-hike/scroller, @code-hike/sim-user
  • Add lerna #145 (@pomber)
• @code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/scroller, @code-hike/sim-user, storybook
  • v0.0.0-4333a8b #145 (@pomber)
  • v0.0.0-6a4ea1c #145 (@pomber)
  • v0.0.0-e48fa74 #145 (@pomber)
  • v0.0.0-1f0ad83 #145 (@pomber)
  • v0.0.0-cde697c #145 (@pomber)
• @code-hike/classer
  • Add link to thread #145 (@pomber)
  • Add readme #145 (@pomber)
• @code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/utils
  • Add classer #145 (@pomber)
• @code-hike/scroller, storybook
  • Fix intersection observer in Safari #145 (@pomber)
• @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/scroller, @code-hike/sim-user, storybook, @code-hike/utils
  • v0.0.0-aa6efee #145 (@pomber)
  • v0.0.0-b57b267 #145 (@pomber)
  • v0.0.0-33f17eb #145 (@pomber)
  • v0.0.0-211ab01 #145 (@pomber)
  • v0.0.0-6dfbe3d #145 (@pomber)
  • v0.0.0-133ab88 #145 (@pomber)
  • v0.0.0-4adbd70 #145 (@pomber)
  • Add scrollycoding package #145 (@pomber)
• @code-hike/mini-browser, storybook
  • Change focus style #145 (@pomber)
  • Add back mini browser #145 (@pomber)
  • Add browser transition #145 (@pomber)
  • Fix browser default url #145 (@pomber)
• @code-hike/mini-editor, @code-hike/mini-frame
  • Full width lines for easier text selection #145 (@pomber)
• @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/script, storybook
  • Use sass #145 (@pomber)
• @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/scroller, @code-hike/sim-user, @code-hike/utils
  • v0.0.0-8cbbd89 #145 (@pomber)
• @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, storybook, @code-hike/utils
  • Change styles #145 (@pomber)
• @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/scroller, @code-hike/sim-user
  • v0.0.0-a3f5be4 #145 (@pomber)
  • Remove site #145 (@pomber)
  • Refactor scripts #145 (@pomber)
  • Change canary version #145 (@pomber)
  • Refactor all the things #13 (@pomber)
• @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/scroller
  • Fix component types #145 (@pomber)
• @code-hike/mini-frame, storybook
  • Make height required for mini-frames #145 (@pomber)
  • Run prettier #145 (@pomber)
• @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/script, @code-hike/scroller, @code-hike/sim-user
  • v0.0.0-6a7ffe8 #145 (@pomber)
  • v0.0.0+6aadf0c #145 (@pomber)
  • Rename build to script #145 (@pomber)
• @code-hike/scroller
  • Fix intersection observer on Firefox #145 (@pomber)

⚠️ Pushed to main

• Update README.md (@pomber)
• Update note (@pomber)

🏠 Internal

• Bump auto version #35 (@pomber)
• storybook
  • Add Chromatic #70 (@pomber)
• @code-hike/mini-editor, @code-hike/smooth-code
  • Extract smooth-code package #69 (@pomber)
• @code-hike/mini-editor, storybook
  • Rename editor components #56 (@pomber)
• @code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/script, @code-hike/scroller, @code-hike/sim-user
  • Better release log #41 (@pomber)

📝 Documentation

• @code-hike/mini-browser, storybook
  • Add storybook docs #71 (@pomber)

🔩 Dependency Updates

• @code-hike/mdx, @code-hike/script, @code-hike/smooth-code, @code-hike/utils
  • Add color-scheme CSS #129 (@pomber)

Authors: 2

• Nirmalya Ghosh (@ghoshnirmalya)
• Rodrigo Pombo (@pomber)