Skip to content

跨行注释未闭合时的代码被高亮为注释了 #233

Description

@CocoaTouch123

衔接issues:#209
@otakustay 复现demo如下:
https://codesandbox.io/p/sandbox/react-diff-view-with-code-expansion-forked-n9z7l6
辛苦帮忙看下,你点击190行下面的'Expand Down'就能复现

Image

Image

Activity

  1. CocoaTouch123 commented on Oct 15, 2025

    @CocoaTouch123
    Author

    @otakustay 上面的case我使用了一些hack方式进行特殊处理了,在tokens处理层进行hack。帮忙看下插件侧是否有其他更好的方式进行处理下
    如下代码:

    const tokens = useMemo(() => {
        const hasCollapsedBetweenHunks = (hunksWithMinLinesCollapsed?.length || 0) > 1;
        const containsPotentialUnclosedBlockComment = (() => {
          if (oldSource) return false;
          if (!hasCollapsedBetweenHunks) return false;
          try {
            for (const h of hunksWithMinLinesCollapsed || []) {
              for (const ch of h.changes || []) {
                const text = (ch.content || '').replace(/^[-+ ]/, '');
                // JS/TS/JSX/TSX:匹配 /* 或 JSX 的 {/*,但同一行没有对应的 */ 或 */}
                const hasJsBlockStart = /\{?\s*\/\*/.test(text);
                const hasJsBlockEndSameLine = /\*\/\s*\}?/.test(text);
                if (hasJsBlockStart && !hasJsBlockEndSameLine) return true;
    
                // HTML/模板(如 Vue 模板):匹配 <!-- 但同一行没有 -->
                const hasHtmlBlockStart = /<!--/.test(text);
                const hasHtmlBlockEndSameLine = /-->/.test(text);
                if (hasHtmlBlockStart && !hasHtmlBlockEndSameLine) return true;
              }
            }
          } catch (e) {
            // 忽略扫描异常
          }
          return false;
        })();
    
        const shouldDisableHighlight = language !== 'bat' && !oldSource && hasCollapsedBetweenHunks && containsPotentialUnclosedBlockComment;
    
        const options: TokenizeOptions = {
          refractor,
          highlight: !shouldDisableHighlight && language !== 'bat',
          language,
          oldSource,
          enhancers: compact(enhancers),
        };
    
        try {
          return tokenize(hunksWithMinLinesCollapsed, options);
        } catch (error) {
          // 如果 tokenize 失败(通常由于语法错误),返回不带高亮的 tokens
          // eslint-disable-next-line no-console
          console.warn('语法高亮失败,使用无高亮模式:', error);
          const fallbackOptions: TokenizeOptions = {
            refractor,
            highlight: false,
            language,
            oldSource,
            enhancers: compact(enhancers),
          };
          return tokenize(hunksWithMinLinesCollapsed, fallbackOptions);
        }
      }, [hunksWithMinLinesCollapsed, language, oldSource, enhancers]);
  2. CocoaTouch123 commented on Oct 15, 2025

    @CocoaTouch123
    Author

    不过在使用过程中还遇到了一个特殊的case,不太好处理,Golang代码会有'``'string模版字符串,已经闭合了,但是其他后的代码都被高亮为字符串了,如下图

    Image 辛苦帮忙看下
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions