feat(v2): add filename in CodeBlock #2346

kohheepeace · 2020-03-01T04:10:33Z

Motivation

Add filename in CodeBlock which is mentioned in #2271

If you write below markdown like below, it will create filename in CodeBlock.

```js:src/pages/hello.js {2}
console.log('hogehoge');
```

Screenshot of output

[dark mode]

[white mode]

I like this markdown syntax to create "filename", but it depends on docusaurus team.

```js:src/pages/hello.js {2}
console.log('hogehoge');
```

Have you read the Contributing Guidelines on pull requests?

Yes!

Test Plan

Add CodeBlock with this syntax in your doc.

```js:src/pages/hello.js {2}
console.log('hogehoge');
```

docusaurus-bot · 2020-03-01T04:16:17Z

Deploy preview for docusaurus-2 ready!

Built with commit 13e024f

https://deploy-preview-2346--docusaurus-2.netlify.com

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

lex111 · 2020-03-01T10:17:21Z

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

+.fileName {
+  padding: 4px 12px;
+  font-weight: bold;
+  text-decoration: underline;


I think it would be better to separate these two blocks via the bottom border.

code title

code

This is a boderBottom: '1px solid'; one with

<pre className={classnames(className, styles.codeBlock)} style={style}>

The problem is

I couldn't find easiest way to filename div width 100%.

That's why boder-bottom is lacking.

I found easy solution to set text-decoration: underline; and looks ok.

lex111 · 2020-03-01T10:28:52Z

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

@@ -40,6 +40,7 @@ export default ({children, className: languageClassName, metastring}) => {

  const target = useRef(null);
  const button = useRef(null);
+  const fileName = languageClassName.split(':')[1];


Can we make this feature more general? It seems to me that we need to look at this as a code title, not as just a code filename. For example, I want to add some text that has spaces in it, will it work?

```js:"My Code title" {2}
console.log('123');
```

Agree! And currently your example not working 😢

Could you add such an opportunity?

kohheepeace · 2020-03-01T20:00:20Z

@lex111 Hi, I update code! Thanks for your review.

1. To use Regex to find title from markdown.

I'm not mature to write clean code to accomplish the below syntax 😢

```js:"Code title" {2}
console.log('hogehoge');
```

Current mdx api is not good for above syntax.
mdx-js/mdx#702

That's why I change markdown syntax like below. （order doesn't matter.）

```js {2} title="Code title"
console.log('hogehoge');
```

2. Change design style based on your advice

I update code to accomplish your suggestion.
And I forgot considering about "when code title is blank" in last commit.
That's why code becomes a little bit messy.

[CodeBlock with title]

[CodeBlock without title]

Thanks!

lex111

@kohheepeace thanks for rework!

Remember to also duplicate these changes in live codeblock https://github.com/facebook/docusaurus/blob/a2fb0648340778428880e19e88a2aa84b1154329/packages/docusaurus-theme-live-codeblock/src/index.js

And as a demo add a code title in any code block to website/docs/ (for "package.json" here eg)

lex111 · 2020-03-07T09:45:41Z

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

          <button
            ref={button}
            type="button"
            aria-label="Copy code to clipboard"
-            className={styles.copyButton}
+            className={classnames(styles.copyButton, {
+              [`${styles.copyButtonWithTitle}`]: codeBlockTitle,


Just use [styles.copyButtonWithTitle]: codeBlockTitle,

Oh okay! Nice!

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

kohheepeace · 2020-03-09T00:41:57Z

@lex111 I will re-PR by end of today with docs and liveCodeBlock! Thanks for your review!

kohheepeace · 2020-03-10T10:33:23Z

@lex111 I updated code 👍

lex111

Hi @kohheepeace sorry for the long answer, but we need to remove a fixed height for the code title, since on mobiles we observe the following:

Current	Should be

I think it is possible, as it was earlier, to move copy button to the pre element and position this button accordingly with respect to the pre element.

kohheepeace · 2020-03-16T08:28:30Z

@lex111 thanks for taking time for review! I will fix this asap. sorry !

kohheepeace · 2020-03-16T11:41:27Z

@lex111 I updated code.

move copy button to the pre element and position this button accordingly with respect to the pre element.

Just by doing 👆 leads to horizontal scroll bug like below. (It worked before because copy-button is absolute towards mdxCodeBlock but this doesn't work by adding code title block.)

That's why I also need to separate code block and title. 😢
(=> I needed to add a new container. Code become messy 😢 )

lex111 · 2020-03-16T13:37:03Z

@kohheepeace most likely yes, in this situation, an additional container is indispensable. Although perhaps @yangshun can tell an alternative solution.

In the meantime, let's just rename codeBlockWrapper to codeBlockContent.

And also make copy button appear when you hover over code title with this code:

.codeBlockTitle:hover + .codeBlockContent .copyButton,
.codeBlockContent:hover > .copyButton {
  visibility: visible;
  opacity: 1;
}

kohheepeace · 2020-03-16T13:42:03Z

In the meantime, let's just rename codeBlockWrapper to codeBlockContent.

=> super agreed 👍

And also make copy button appear when you hover over code title with this code:

=>okay 👍

kohheepeace · 2020-03-16T15:59:28Z

@lex111 @yangshun updated code👍

lex111

Little docs improvements.

website/docs/markdown-features.mdx

lex111

👍

@yangshun please review.

markerikson · 2020-03-22T18:20:37Z

Would love to see this get in so we can use it in the Redux docs!

lex111 · 2020-03-23T11:57:30Z

@kohheepeace I updated the code blocks markup in master branch, so conflicts have appeared in your PR now, could you please resolve them?

kohheepeace · 2020-03-23T12:33:03Z

@lex111 okay! Should I rebase or merge commit?

lex111 · 2020-03-23T12:46:11Z

@kohheepeace the usual (merge) commit will be enough.

kohheepeace · 2020-03-23T13:12:25Z

@lex111 I merged master and fixed conflict related this PR 👍 #2442

=> Sorry 😢 It looks unrelated file changes is included. I will fix this.

- Delete unnecessary template literals - Delete unnecessary "important!" from css

kohheepeace · 2020-03-23T14:10:32Z

@lex111 sorry for my poor git knowledge. I fixed conflict.

yangshun

Awesome, thank you!

markerikson · 2020-03-25T17:12:56Z

yayyy! #2456 next? :)

OlofHarrysson · 2020-04-11T21:43:46Z

Hi, I'm having some problems getting this to work on my end. The title doesn't show up when I'm copying this code from the docs. https://v2.docusaurus.io/docs/markdown-features#code-title

```jsx title="src/components/HelloCodeTitle.js"
function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

I'm on version 2.0.0-alpha.50. Not very experienced with web dev.

lex111 · 2020-04-11T22:00:28Z

Are you sure you're using the latest version (eg. try reinstall deps)? I see no other reason why it can't work. We need the repository so that we can reproduce this issue.

OlofHarrysson · 2020-04-12T07:03:58Z

Hi lex111, no I'm not sure. I tried following the upgrade instructions.

When you hinted that I might be on the wrong version, I checked my package.json file which I've already updated.

  "dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.50",
    "@docusaurus/preset-classic": "^2.0.0-alpha.50",
    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
    "@docusaurus/theme-search-algolia": "^2.0.0-alpha.32",

I changed so that all the versions were alpha.50, not just the core and preset-classic. That fixed the title issue I had for the code blocks, at least they show up now. But there is some issue with the styling, no rounded corner and can't read the copy button text when mouseover.

I'll push my code to my repo,
https://github.com/OlofHarrysson/anyfig if you want to have a look

I'd be willing to try to reinstall reps, how can I do that? yarn install? That gives me a few warning

lex111 · 2020-04-12T07:15:38Z

@OlofHarrysson we are aware of this issue and have already fixed it, so we will soon make a new release that will also include this fix.
By the way, you could just specify two deps (core and preset-classic), the rest you can remove (eg. https://github.com/facebook/docusaurus/blob/master/website/package.json#L12)

OlofHarrysson · 2020-04-12T07:25:59Z

@lex111 Ok great! I'll wait for the next release and work on my content in the meantime. Thanks for your help

kohheepeace requested review from lex111, wgao19 and yangshun as code owners March 1, 2020 04:10

facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 1, 2020

lex111 reviewed Mar 1, 2020

View reviewed changes

lex111 changed the title ~~feat: add filename in CodeBlock~~ feat(v2): add filename in CodeBlock Mar 1, 2020

lex111 reviewed Mar 7, 2020

View reviewed changes

lex111 reviewed Mar 16, 2020

View reviewed changes

lex111 reviewed Mar 17, 2020

View reviewed changes

website/docs/markdown-features.mdx Outdated Show resolved Hide resolved

website/docs/markdown-features.mdx Outdated Show resolved Hide resolved

lex111 approved these changes Mar 17, 2020

View reviewed changes

lex111 added this to the v2.0.0-alpha.49 milestone Mar 17, 2020

lex111 added the pr: new feature This PR adds a new API or behavior. label Mar 21, 2020

kohheepeace added 4 commits March 23, 2020 21:48

feat: add filename in CodeBlock

d10e67e

Fix code to use Regex to find title from markdown and Update style

41adf04

Fix reviewed point

556420c

- Delete unnecessary template literals - Delete unnecessary "important!" from css

Add title in live codeblock

fff95a5

kohheepeace added 7 commits March 23, 2020 21:53

Just edit code order

713c1e7

Add demo for code title

b672195

Add docs about code title in markdown-features.mdx

40a84b0

Make code title height scalable

c474235

Rename codeBlockWrapper to codeBlockContent

9e8d8c3

Make copyButton appear when hovering codeTitle

1316222

Fix docs description about code title

13e024f

kohheepeace force-pushed the kohheepeace-codeblock-filename branch from 2a2e80a to 13e024f Compare March 23, 2020 13:58

lex111 approved these changes Mar 23, 2020

View reviewed changes

yangshun approved these changes Mar 25, 2020

View reviewed changes

yangshun merged commit 5e0d11d into facebook:master Mar 25, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(v2): add filename in CodeBlock #2346

feat(v2): add filename in CodeBlock #2346

kohheepeace commented Mar 1, 2020

docusaurus-bot commented Mar 1, 2020 •

edited

Loading

lex111 Mar 1, 2020

kohheepeace Mar 1, 2020

lex111 Mar 1, 2020

kohheepeace Mar 1, 2020

lex111 Mar 1, 2020

kohheepeace Mar 1, 2020

kohheepeace commented Mar 1, 2020 •

edited

Loading

lex111 left a comment

lex111 Mar 7, 2020

kohheepeace Mar 9, 2020

kohheepeace commented Mar 9, 2020 •

edited

Loading

kohheepeace commented Mar 10, 2020

lex111 left a comment

kohheepeace commented Mar 16, 2020

kohheepeace commented Mar 16, 2020 •

edited

Loading

lex111 commented Mar 16, 2020

kohheepeace commented Mar 16, 2020

kohheepeace commented Mar 16, 2020

lex111 left a comment

lex111 left a comment

markerikson commented Mar 22, 2020

lex111 commented Mar 23, 2020

kohheepeace commented Mar 23, 2020

lex111 commented Mar 23, 2020

kohheepeace commented Mar 23, 2020 •

edited

Loading

kohheepeace commented Mar 23, 2020

yangshun left a comment

markerikson commented Mar 25, 2020

OlofHarrysson commented Apr 11, 2020 •

edited

Loading

lex111 commented Apr 11, 2020

OlofHarrysson commented Apr 12, 2020

lex111 commented Apr 12, 2020

OlofHarrysson commented Apr 12, 2020

feat(v2): add filename in CodeBlock #2346

feat(v2): add filename in CodeBlock #2346

Conversation

kohheepeace commented Mar 1, 2020

Motivation

Screenshot of output

Have you read the Contributing Guidelines on pull requests?

Test Plan

docusaurus-bot commented Mar 1, 2020 • edited Loading

Choose a reason for hiding this comment

code title

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kohheepeace commented Mar 1, 2020 • edited Loading

lex111 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kohheepeace commented Mar 9, 2020 • edited Loading

kohheepeace commented Mar 10, 2020

lex111 left a comment

Choose a reason for hiding this comment

kohheepeace commented Mar 16, 2020

kohheepeace commented Mar 16, 2020 • edited Loading

lex111 commented Mar 16, 2020

kohheepeace commented Mar 16, 2020

kohheepeace commented Mar 16, 2020

lex111 left a comment

Choose a reason for hiding this comment

lex111 left a comment

Choose a reason for hiding this comment

markerikson commented Mar 22, 2020

lex111 commented Mar 23, 2020

kohheepeace commented Mar 23, 2020

lex111 commented Mar 23, 2020

kohheepeace commented Mar 23, 2020 • edited Loading

kohheepeace commented Mar 23, 2020

yangshun left a comment

Choose a reason for hiding this comment

markerikson commented Mar 25, 2020

OlofHarrysson commented Apr 11, 2020 • edited Loading

lex111 commented Apr 11, 2020

OlofHarrysson commented Apr 12, 2020

lex111 commented Apr 12, 2020

OlofHarrysson commented Apr 12, 2020

docusaurus-bot commented Mar 1, 2020 •

edited

Loading

kohheepeace commented Mar 1, 2020 •

edited

Loading

kohheepeace commented Mar 9, 2020 •

edited

Loading

kohheepeace commented Mar 16, 2020 •

edited

Loading

kohheepeace commented Mar 23, 2020 •

edited

Loading

OlofHarrysson commented Apr 11, 2020 •

edited

Loading