Show HN: Code Hike – More than syntax highlighting | Hacker News Reader

Show HN: Code Hike – More than syntax highlighting

codehike.org

118 pointspomber39 comments

The marketing on the homepage needs an overhaul. Took me a really long time to understand the product! The automatic code changing at the top was super confusing. Clicking on the demos didn't work. A lot of the demos had locks on them (???), which is weird -- the demos help me understand the product, why would they be locked? More confusing, a lot of the locked demos had been unlocked by sponsors, so clicking on them worked! So why was the lock still there?

Also the tag "more than syntax highlighting" is what threw me off. I thought this would be an IDE extension or something that extended syntax highlighting in some cool way. I thought you were just using markdown as an example. Maybe "supercharged markdown code blocks" might be a better tag line.

That's probably the biggest thing I see as a production-ready blocker. The feature itself looks cool based on the few demos I saw.

I think the idea of having to sponsor to see the demos which should make people decide to sponsor/invest in the project because they find it useful for them is weird enough.

I'm not going to pay $9 a month to unlock what is effectively documentation.

Make the product or library itself paid in some form, sure...but I don't understand why you would hold your own marketing material hostage that way.

I also don't understand why there are video-based examples of what looks to be a React component.

> Everyone can see all the demos, but only sponsors can see the code for demos marked with . Locked demos are unlocked for everyone after being sponsored by five sponsors.

i think the demos are visible to everyone, but the _source_ is only viewable by sponsors.

that said, still seems weird to lock away code that could make people use your product.

Thanks for the feedback.

> More confusing, a lot of the locked demos had been unlocked by sponsors, so clicking on them worked! So why was the lock still there?

I didn't understand this part. Are you seeing locks on the first three demos?

For example, there's a lock on the Annotations demo. This makes me think it's unavailable. But clicking on it shows both the code and the output! That's because the demo has been unlocked since 5 people have sponsored it. If it's been unlocked, why is there a lock icon?

Strange, I don't see the lock on the Annotations demo.

Sorry, Comment Annotations. They seem to be working now.

Quite impressive, I didn't get it at first because I thought it was just MDX. Then I saw that there were changes in the video such as "```js focus=2,4[9:30],6", ans I saw that the code in the video was highlighted differently, then I understood the product. It's a way to annotate code more deeply than just with MDX. You need to make that much more explicit IMO, it needs to be quite clear when people read the site. I recommend a site that is more long form and describes the features well.

Also get rid of the weird "sponsorship for unlocking documentation" model. Make the library sponsorware if you need to, as in you can't see the code until you sponsor, but why would you make the docs sponsored? They're what might entice people to actually pay to use your software. As someone else said, you're actually crippling your own sponsorships by hiding marketing material behind a paywall. Marketing should be free so that as many people see it as possible, and some subset will buy. If you cut off the top of that funnel, you just get fewer people buying.

Agree completely.

I could eventually figure out what it was doing but the speed of the videos flipping between examples looks like it was set by people who already knew what the message was, rather than for people who don't know it (yet)

Indeed, and that's always the issue with product creators writing their own marketing pages eh? They don't know how to dissociate themselves from the product and to look at it in terms of a normal person with no connection to or knowledge of the product.

Thirded. I came away from this thinking, "Oh, this is a way to make those little code blocks with colored text on black background."

I'd be curious your take on https://torchlight.dev. I went more long form.

I'm not the same person, but for whatever it's worth, I found it easier to understand Torchlight from your landing page. It has less emphasis on social validation and more on specifically what the software does, which speaks more loudly to me as a reader. Also, just using scrolling to allow the reader to digest the core features rather than a too-fast animation loop helps tremendously for digesting something new.

I also appreciate that you didn't throw around many unfamiliar technologies, with an assumption that all readers will be as looped into the same technology ecosystem. "Blade templates" is unfamiliar to me, but I can see from the code at the right, you're just illustrating another source file format that doesn't highlight well with traditional highlighters; it's not important for me to know what Blade is.

About the only section I'd say could use some work is the installation section, where a bunch of PHP ecosystem tech is mentioned, all of which is foreign to me. Maybe a, "Not a PHP developer? Here's a quick walk-through of what you need to know..." (linking to another page.)

I think your 5000 requests per month for the businesss tier are a bit on the low side. Especially, since there is nothing above that.

Maybe add a "Need more? Contact us" tier.

Also, I'd love to use this with technologies other than PHP. I use Rocket (Rust) in one of my projects and tried to check out the standalone cli as my only option.

The link to it didn't work on firefox mobile.

Thankfully clicking on any of the PHP things worked and brought me to the same docs where I could then navigate to the CLI.

Maybe highlight it more that you don't even need special integration with the Webserver, since it's possible to preprocess pages with your cli utility.

That part was not immediately obvious and might have turned me away, had I not been determined to see what the CLI tool did.

I created a syntax highlighting API earlier this year with some of the same features: https://torchlight.dev.

I've got a handful of paying users and a few hundred free. I'm happy to see syntax highlighting being pushed forward!

I'll definitely be following along, it's beautiful stuff.

Just a small heads-up that the first 9 code examples has double scrollbars (see "Scrollbar Blindness" [0]). It's often better with `overflow-x: auto` than `overflow-x: scroll` :)

[0]: https://web.archive.org/web/20210226184710/https://svenkadak...

Ah good note. Thanks.

lol, people paying money for this?

Right? I'm 99% sure this thing uses https://github.com/shikijs/shiki

I've also made a pretty complex thing with shiki (shiki-twoslash which you could say is similar to torchlight but just for TS/JS)

Torchlight definitely a good chunk of work on top of shiki, and as an external API it might be much easier to work with in many non-JS ecosystems.

Hey funny seeing you here! Twoslash is incredible, I'm jealous of some of the stuff you can pull off since you're TS/JS only. You've done an amazing job with it, I've always enjoyed looking through your docs.

Yup! You never know unless you try.

Hi! I'm looking for feedback and ideas before making this production-ready.

You can see an early ancestor of this project on this post https://news.ycombinator.com/item?id=21536789 from two years ago (which had great feedback!).

If you want to try it, beware that current docs are minimal. If you have questions or feedback GitHub Discussions is the best place to post them. Thanks!

Why are certain examples "locked"? Nothing discourages me from using a tool more than an arbitrary popup telling me that I need to spend more money to get an idea of what your product is...

I think it's a fantastic idea. Like a few posted, get to the point with the marketing. It's only later that I understood what it does.

I'd take one of the more advanced gif, that showed highlights, code coming in, file changing, and I'd make that prominent at the top of the page, next to the tagline or marketing spiel.

Remember the What is it, Why do I need it (and is it for me), as people come in and have no idea what it is!

The product looks interesting, I'm bookmarking the site to go checkout on desktop.

On mobile (Chrome on Android) the site is super confusing and has a "hotel California"-vibe: "you can enter but never leave". Pressing the back button multiple times didn't work - I had to close the site.

Thanks. I couldn't reproduce the "Hotel California" bug, also Chrome on Android. Let me know if you have an idea of what could be the issue.

Don't know what happened.

Tried reproducing it, but no go.

Thanks for checking.

On the Lorem Ipsum code blocks: in typesetting Lorem Ipsum exists to provide the shape of text without the content. This seems directly contrary to the goals of your examples. Nobody likes looking at Lorem Ipsum and nobody ever reads Lorem Ipsum.

Ok, so, real talk (and this isn't meant to be a shallow dismissal -- I'm truly interested in the answer): what can I do with Code Hike that I can't do with Pandoc (possibly with a custom filter or 2)?

I think the feedback loop would be much faster with Code Hike.

As a daily user of Markdown, I was never aware of MDX. Your post helped me understand what it is :)

I also like your idea of monetizing by "minimum" sponsors. How do you deal with people not wanting to sponsor because they don't want a monthly commitment but are willing to spend a fixed one-time sponsorship?

Also, what tooling do you use to take care of the sponsorships?

I use the GitHub API for getting the sponsors info.

Some of the sponsors are fixed one-time (or two-times) sponsorships. I add them manually if the contribution is considerable.

Is MDX going to be the only way to use it? I prefer authoring content with WYSIWYG tools (block editors and so on), so would love to be able to use this kind of thing with those.

Yes, the stable API will be MDX-only at least for the first version

Everybody is saying that they didn't got it, but then they got it, and I am still wondering what it does. It looks like Markdown to me. So what is it?

Here is an example:

This page: https://code-hike-sample.vercel.app/ is created entirely from this mdx file: https://raw.githubusercontent.com/pomber/code-hike-sample/ma...

This is great. Dm me on Twitter when it’s ready so I can share it on toolhunt.dev. @jordienr

Reply on news.ycombinator.com