<Highlight
          {...defaultProps}
          theme={theme}
          code={code}
          Prism={PrimsCombined}
          language="token"
        >
          {({ className, style, tokens, getLineProps, getTokenProps }) => {
            console.log("tokens", tokens);
            return (
              <div className={className} style={style}>
                {tokens.map((line, i) => {
                  return (
                    <div {...getLineProps({ line, key: i })}>
                      {line.map((token, key) => {
                        const types = token.types;
                        const isTag = types?.includes("tag");

                        if (isTag)
                          return (
                            <span
                              className="my-anchor-element"
                              title="Hello world!"
                              {...getTokenProps({ token, key })}
                            />
                          );
                        return <span {...getTokenProps({ token, key })} />;
                      })}
                    </div>
                  );
                })}
              </div>
            );
          }}
        </Highlight>