Hello World

1
console.log("hello world")
2

3
function sayHi(name) {
4
  return `hi ${name}`;
5
}

1
import styled from "@emotion/styled";
2

3
console.log("hello world")
4
const l = 123
5
/**
6
* Some comments
7
*/
8
function sayHi(name) {
9
  var message = `hi ${name}`
10
  return message;
11
}
12

13
export const HighlightedCodeText: React.FC<HighlightedCodeTextProps> = ({
14
  codeString,
15
  language,
16
  highlightLine,
17
}) => {
18
  if (!codeString) return null;
19

20
  return (
21
    <Highlight
22
      code={codeString}
23
      language={language}
24
      theme={{ plain: {}, styles: [] }}
25
    >
26
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
27
        <Pre className={className} style={style}>
28
          {tokens.map((line, index) => {
29
            return (
30
              <Line
31
                key={index}
32
                {...getLineProps({
33
                  className:
34
                    highlightLine && highlightLine(index)
35
                      ? "highlight-line"
36
                      : "",
37
                  line,
38
                })}
39
              >
40
                <LineNo>{index + 1}</LineNo>
41
                <LineContent>
42
                  {line.map((token, tokenIndex) => (
43
                    <span key={tokenIndex} {...getTokenProps({ token })} />
44
                  ))}
45
                </LineContent>
46
              </Line>
47
            );
48
          })}
49
        </Pre>
50
      )}
51
    </Highlight>
52
  );
53
};
54

55