pomber

pomber

Overengineer. Tools for better code reading comprehension. Building @code-hike.

Member Since 9 years ago

Experience Points
2.1k
follower
Lessons Completed
24
follow
Lessons Completed
812
stars
Best Reply Awards
151
repos

704 contributions in the last year

Pinned
⚡ Marvellous code walkthroughs
⚡ Quickly browse the history of a file from any git repository
⚡ Rad code slides <🏄/>
⚡ A DIY guide to build your own React
⚡ JSON time-series of coronavirus cases (confirmed, deaths and recovered) per country - updated daily
⚡ Your repo reached a stars milestone? Celebrate with a video of your stargazers!
Activity
Jan
19
1 day ago
Jan
18
2 days ago
started
started time in 1 day ago
started
started time in 1 day ago
started
started time in 1 day ago
Activity icon
created branch
createdAt 1 day ago
Activity icon
issue

pomber issue comment code-hike/codehike

pomber
pomber

bug with the new linenumbers feature?

Hey there, was testing out your new line numbers feature in the pre-release, just with some codeblocks identical to the demo examples, seems to break some of them, unless i've done something wrong -

I just included the option lineNumbers: true and updated to "@code-hike/mdx": "^v0.3.0-next.20"

Screenshot 2022-01-17 at 10 19 16
pomber
pomber

Let me know if you still need help, also if you find the problem let me know, I want to try to prevent similar issues.

Jan
17
3 days ago
Activity icon
issue

pomber issue comment code-hike/codehike

pomber
pomber

bug with the new linenumbers feature?

Hey there, was testing out your new line numbers feature in the pre-release, just with some codeblocks identical to the demo examples, seems to break some of them, unless i've done something wrong -

I just included the option lineNumbers: true and updated to "@code-hike/mdx": "^v0.3.0-next.20"

Screenshot 2022-01-17 at 10 19 16
pomber
pomber

If you could share a minimal repro I'll debug it

Activity icon
issue

pomber issue comment code-hike/codehike

pomber
pomber

bug with the new linenumbers feature?

Hey there, was testing out your new line numbers feature in the pre-release, just with some codeblocks identical to the demo examples, seems to break some of them, unless i've done something wrong -

I just included the option lineNumbers: true and updated to "@code-hike/mdx": "^v0.3.0-next.20"

Screenshot 2022-01-17 at 10 19 16
pomber
pomber

Yes, please, if you have more info post it. Does it happen only with lineNumbers: true?

Jan
16
4 days ago
Activity icon
issue

pomber issue code-hike/codehike

pomber
pomber

Question: does codehike support line numbers rendering?

Cannot find it on the website or in the provided resources - does codehike has an option to show line numbers to the left of the code snippet?

Activity icon
issue

pomber issue comment code-hike/codehike

pomber
pomber

Question: does codehike support line numbers rendering?

Cannot find it on the website or in the provided resources - does codehike has an option to show line numbers to the left of the code snippet?

pomber
pomber

:rocket: Issue was released in v0.3.0-next.20 :rocket:

(you had one job @githubactionsbot)

push

pomber push code-hike/codehike

pomber
pomber
pomber
pomber
pomber
pomber
pomber
pomber
pomber
pomber
pomber
pomber

Merge pull request #111 from code-hike/line-numbers

Line numbers

commit sha: f752074dc455fda5dfadf666e9046eab73f6e35b

push time in 3 days ago
pull request

pomber pull request code-hike/codehike

pomber
pomber

Line numbers

Fix #40 and #95

📦 Published PR as canary version: 0.3.0--canary.111.a1cf9e4.0

:sparkles: Test out this PR locally via:

npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install [email protected]
npm install @code-hike/[email protected]
# or 
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add [email protected]
yarn add @code-hike/[email protected]
Activity icon
issue

pomber issue code-hike/codehike

pomber
pomber

[mini-editor] Line numbers

Activity icon
issue

pomber issue comment code-hike/codehike

pomber
pomber

Question: does codehike support line numbers rendering?

Cannot find it on the website or in the provided resources - does codehike has an option to show line numbers to the left of the code snippet?

pomber
pomber

Now you can render line numbers passing lineNumbers: true on the plugin options:

const { remarkCodeHike } = require("@code-hike/mdx");
const theme = require("shiki/themes/material-ocean.json");

//...
    remarkPlugins: [[remarkCodeHike, { theme, lineNumbers: true }]],
//...
Jan
15
5 days ago
Activity icon
issue

pomber issue code-hike/codehike

pomber
pomber

[code] Style scrollbars using the theme colors

Maybe we can use something like this postcss plugin: https://github.com/pascalduez/postcss-scrollbar, and set some CSS custom properties using the theme colors.

Jan
12
1 week ago
Activity icon
issue

pomber issue comment code-hike/codehike

pomber
pomber

Improved Focus

Torchlight.dev uses some pretty neat styling for focusing lines that allows unblurring on hover. I think that's certainly an improvement as oftentimes you might want to see the focused content and be able to easily read the code around it. Related to #102.

/*
  Blur and dim the lines that don't have the `.line-focus` class,
  but are within a code block that contains any focus lines.
*/
.torchlight.has-focus-lines .line:not(.line-focus) {
    transition: filter 0.35s, opacity 0.35s;
    filter: blur(.095rem);
    opacity: .65;
}

/*
When the code block is hovered, bring all the lines into focus.
*/
.torchlight.has-focus-lines:hover .line:not(.line-focus) {
    filter: blur(0px);
    opacity: 1;
}
pomber
pomber

Good idea. I'll think about it.

Activity icon
issue

pomber issue comment code-hike/codehike

pomber
pomber

Mermaid Support

This may be out of scope of Code Hike, but I'm curious to get your thoughts. Is there plans on implementing mermaidjs? So graphs can be rendered alongside with

``mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

Albeit it may be hard to justify as you can also build diagrams with mermaid live editor or plantuml and simply import the image.

Here's an example for others who are trying to solve something similiar

Code Hike will apply syntax highlighting to any code block

``js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum) : [];
}


<img src="./assets/test.svg" alt=""/>
Screen Shot 2022-01-11 at 12 03 02 AM
pomber
pomber

Hey, I think there are remark plugins that already do that. There are some places where I want to add more extensibility, allowing the user to pass custom components as children to CodeHike's components, I'll try to make sure that it plays nicely with mermaid codeblocks.

Activity icon
created branch

pomber in code-hike/codehike create branch line-numbers

createdAt 1 week ago
Activity icon
issue

pomber issue code-hike/codehike

pomber
pomber

[mdx] Support more comment syntaxes

We only support // syntax. Maybe we could use vscode-textmate directly to find any comment content for any supported lang.

Jan
9
1 week ago
Activity icon
issue

pomber issue code-hike/codehike

pomber
pomber

[mdx] Bundle size

Two improvements to bundle size:

  • only include the theme once
  • import only the components that are being used

For example, in:

# Hello

```js
function lorem(ipsum) {}
```

```js
function lorem(ipsum) {}
```

The theme should appear only once in the output. Also, unused components (like CH.Spotlight) shouldn't be included in the final bundle.

Jan
7
1 week ago
Activity icon
delete

pomber in code-hike/codehike delete branch fix-annotation-regex

deleted time in 1 week ago
push

pomber push code-hike/codehike

pomber
pomber
pomber
pomber

Merge pull request #105 from code-hike/fix-annotation-regex

Fix annotation regex

commit sha: ea217c7af308e84224a200999e35785d775e2e18

push time in 1 week ago
pull request

pomber pull request code-hike/codehike

pomber
pomber

Fix annotation regex

Fix #104

📦 Published PR as canary version: 0.3.0--canary.105.d3f27ad.0

:sparkles: Test out this PR locally via:

npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install @code-hike/[email protected]
npm install [email protected]
npm install @code-hike/[email protected]
# or 
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add @code-hike/[email protected]
yarn add [email protected]
yarn add @code-hike/[email protected]
Activity icon
issue

pomber issue code-hike/codehike

pomber
pomber

Type error when parsing the comments

Here the regexp returns null for specific code comments, which results in an Uncaught TypeError: null is not iterable error:

// hello → works

//hello  → errors if there's no space after //
// 你好   → errors
// å     → errors

https://github.com/code-hike/codehike/blob/60e0c2099ac35cee96415c49fd893db1ccd0b3e3/packages/mdx/src/plugin/annotations.ts#L62-L65

Activity icon
created branch

pomber in code-hike/codehike create branch fix-annotation-regex

createdAt 1 week ago
Previous