Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

After a year in the making, I'm excited to announce Code Hike 1.0! 🎉 Code Hike bridges the gap between Markdown and React to help you create technical content that takes advantage of the modern web v1.0 introduces two new features: - Fine-grained markdown - Headless codeblocks

Rodrigo Pombo

8,427 subscribers

52,398 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

9 Comments

Rodrigo Pombo1 year ago

Fine-grained markdown When using Markdown, the content often becomes an inflexible block of UI that limits your control over its rendering. Code Hike allows you to break down your Markdown into smaller pieces, which can be rendered however you like using React.

Rodrigo Pombo1 year ago

Headless codeblocks With Code Hike 1.0, you can build your own component library for codeblocks. - Use React components to define UI and behaviors - Add comments inside your codeblocks to make use of those components

Rodrigo Pombo1 year ago

Code Hike 1.0 doesn't ship with UI components, but the new website includes plenty of examples you can copy, paste, and adapt to your needs.

Rodrigo Pombo1 year ago

Read more about the new features in the announcement blog post:

Alex Sidorenko1 year ago

The future of documentation 🚀

Virgile RIETSCH1 year ago

i'm so happy. Good job man !

trash1 year ago

yayay

Gabriel Tibúrcio1 year ago

Great job, as usual!

Stefan Mai1 year ago

Amazing work, this looks awesome!

Related Videos

This is an excellent feature of Grok4. The code you provide to Grok gets nicely formatted in a Markdown block. The play button lets you run your code in the browser. You can also easily copy or edit your code.

This is an excellent feature of Grok4. The code you provide to Grok gets nicely formatted in a Markdown block. The play button lets you run your code in the browser. You can also easily copy or edit your code.

tetsuo

1,054,866 views • 10 months ago

we all know LLMs love markdown i have built a tool that lets you convert any web page to markdown npm i web-to-markdown i ran some benchmarks and the results are shocking at how many tokens you can save🤯

we all know LLMs love markdown i have built a tool that lets you convert any web page to markdown npm i web-to-markdown i ran some benchmarks and the results are shocking at how many tokens you can save🤯

Nidhi Singh

30,741 views • 3 months ago

Excited to release HuggingChat 💬 - a native macOS app that brings powerful open-source language models straight to your desktop - with markdown support, web browsing, code syntax highlighting and much more!

Excited to release HuggingChat 💬 - a native macOS app that brings powerful open-source language models straight to your desktop - with markdown support, web browsing, code syntax highlighting and much more!

Cyril Zakka, MD

289,729 views • 1 year ago

SymbolicRegression.jl → 1.0 🎉 After several years of work, I'm thrilled to announce some major new features! Let me show you what's possible now:

SymbolicRegression.jl → 1.0 🎉 After several years of work, I'm thrilled to announce some major new features! Let me show you what's possible now:

Miles Cranmer

26,991 views • 1 year ago

Check this!! An MCP server to control Jupyter notebooks from Claude! It lets you: - Create code cells - Execute code cells - Create markdown cells Completely free to use!

Check this!! An MCP server to control Jupyter notebooks from Claude! It lets you: - Create code cells - Execute code cells - Create markdown cells Completely free to use!

Avi Chawla

56,911 views • 1 year ago

Writing code to automate your repo? Great. Writing Markdown to do it? Pretty sick. GitHub Agentic Workflows: now in technical preview.

Writing code to automate your repo? Great. Writing Markdown to do it? Pretty sick. GitHub Agentic Workflows: now in technical preview.

GitHub

40,905 views • 2 months ago

I'm super excited to announce the release of GradientGen, an open-source gradient generator ! Repost and I'll DM you the tool + the source code :)

I'm super excited to announce the release of GradientGen, an open-source gradient generator ! Repost and I'll DM you the tool + the source code :)

Noé Garsoux Ⓓ

289,332 views • 7 months ago

This Obsidian and Claude architecture charges nothing and removes the maintenance entirely. Obsidian stores everything as plain Markdown files. Claude Code points at the vault directory. No API integrations. No paid connectors. No configuration beyond a folder path. The gap between project management systems that get abandoned the moment life gets busy and a system that maintains itself from the notes you were already writing is not discipline or organizational skill. It is the architecture described in this article, and the afternoon it takes to build five markdown components that never need a status update meeting again.

This Obsidian and Claude architecture charges nothing and removes the maintenance entirely. Obsidian stores everything as plain Markdown files. Claude Code points at the vault directory. No API integrations. No paid connectors. No configuration beyond a folder path. The gap between project management systems that get abandoned the moment life gets busy and a system that maintains itself from the notes you were already writing is not discipline or organizational skill. It is the architecture described in this article, and the afternoon it takes to build five markdown components that never need a status update meeting again.

NeilXbt

32,130 views • 24 days ago

I'm excited to announce that the code of Athena Crisis is now open source under the MIT-License. Check out the announcement:

I'm excited to announce that the code of Athena Crisis is now open source under the MIT-License. Check out the announcement:

Christoph Nakazawa

108,296 views • 2 years ago

We’ve fixed a bug that caused Markdown responses to be split between Blocks and the chat interface. Markdown will now render only within Blocks.

We’ve fixed a bug that caused Markdown responses to be split between Blocks and the chat interface. Markdown will now render only within Blocks.

v0

20,264 views • 1 year ago

New video: MDX with Next.js! Learn how to combine the power of React components with markdown in the App Router. We also cover some of the built-in metadata features as well as CSS view transitions.

New video: MDX with Next.js! Learn how to combine the power of React components with markdown in the App Router. We also cover some of the built-in metadata features as well as CSS view transitions.

Lee Robinson

79,109 views • 1 year ago

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉

Excited to launch react-three/xr🤳🥽 Leverage the latest WebXR features, reuse your existing interactions, and advance what is possible in AR and VR on the Web. ↳ Turn your existing R3F app into an AR or VR experience with only a few lines of code. 🎉

Bela Bohlender

40,102 views • 1 year ago

Here is a quick demo of pasting the GitHub code snippets on my note app ✨ You can quickly paste code snippets from GitHub links to your Markdown notes😎

Here is a quick demo of pasting the GitHub code snippets on my note app ✨ You can quickly paste code snippets from GitHub links to your Markdown notes😎

Takuya 🐾 devaslife

37,959 views • 6 months ago

Introducing our new Web Editor! You can now create, edit, and publish docs with a fully WYSIWYG experience, all while syncing with markdown. Build beautiful documentation regardless of your technical experience.

Introducing our new Web Editor! You can now create, edit, and publish docs with a fully WYSIWYG experience, all while syncing with markdown. Build beautiful documentation regardless of your technical experience.

Mintlify

64,497 views • 1 year ago

Skills allow you to extend Claude Code in new ways using pre-packaged instructions and code. For example, add the docx skill to let Claude Code create word documents. I think skills make Claude Code even better as a general purpose agent, I'm excited to see how you use them!

Skills allow you to extend Claude Code in new ways using pre-packaged instructions and code. For example, add the docx skill to let Claude Code create word documents. I think skills make Claude Code even better as a general purpose agent, I'm excited to see how you use them!

Thariq

127,899 views • 8 months ago

1/6🎉 After months of hardwork, we're excited to announce to you that the Mansa Web App will be launching soon. Our Web app offers several standout features in line with our mission of revolutionizing credit financing in emerging markets. Let's take a look at some of our most amazing features👇🏼

1/6🎉 After months of hardwork, we're excited to announce to you that the Mansa Web App will be launching soon. Our Web app offers several standout features in line with our mission of revolutionizing credit financing in emerging markets. Let's take a look at some of our most amazing features👇🏼

MANSA

27,244 views • 1 year ago

🆕📣 Today I'm stoked to announce my next thing: Opacity Opacity is a groundbreaking design tool that eliminates the gap between design and engineering, enabling users to visually design code components. ✔️ Git-like collaboration for design teams ✔️ Never code out a design again ✔️ AI fine-tuned to your design, to help you build real products, not just prototypes Sign up for early access!

🆕📣 Today I'm stoked to announce my next thing: Opacity Opacity is a groundbreaking design tool that eliminates the gap between design and engineering, enabling users to visually design code components. ✔️ Git-like collaboration for design teams ✔️ Never code out a design again ✔️ AI fine-tuned to your design, to help you build real products, not just prototypes Sign up for early access!

Drew Wilson

106,587 views • 10 months ago

4.1 vs Claude "search for the lifx api docs official and create a markdown file that documents the api. include auth, how to call the api, as well as a markdown table of all api endpionts and their parameters. save to the docs folder."

4.1 vs Claude "search for the lifx api docs official and create a markdown file that documents the api. include auth, how to call the api, as well as a markdown table of all api endpionts and their parameters. save to the docs folder."

Burke Holland

48,080 views • 10 months ago

New Year, New Content & Much more on the way! Looking forward to making this next year a one to remember for content creation! 🎉 Excited to announce I’ll now be streaming See ya there! 🍾

New Year, New Content & Much more on the way! Looking forward to making this next year a one to remember for content creation! 🎉 Excited to announce I’ll now be streaming See ya there! 🍾

AnthonyZ

170,205 views • 1 year ago

Introducing React Native Enriched Markdown – a new React Native Enriched package by Gregory Moskaliuk! 🚀 It’s a fully native Markdown renderer for React Native that makes Markdown content feel like a first-class part of your app’s UI. ⚡ Purely native performance – lightning-fast parsing with md4c and 100% native text components ✨ Native text & image interactions (select, copy, translate, save, etc.) 📝 Smart rich-text copy (HTML/RTF) + “Copy as Markdown” option 🔗 GitHub link in the 🧵. If you find it useful, a ⭐would mean a lot!

Introducing React Native Enriched Markdown – a new React Native Enriched package by Gregory Moskaliuk! 🚀 It’s a fully native Markdown renderer for React Native that makes Markdown content feel like a first-class part of your app’s UI. ⚡ Purely native performance – lightning-fast parsing with md4c and 100% native text components ✨ Native text & image interactions (select, copy, translate, save, etc.) 📝 Smart rich-text copy (HTML/RTF) + “Copy as Markdown” option 🔗 GitHub link in the 🧵. If you find it useful, a ⭐would mean a lot!

Software Mansion

26,793 views • 5 months ago