代码编辑器如何在不使用缩进的情况下有效地提示代码嵌套级别？[关闭]

我已经编写了一个XML文本编辑器，该编辑器为相同的XML文本提供2个视图选项，其中一个缩进（虚拟），另一个向左对齐。左对齐视图的动机是帮助用户“看到”用于纯文本或XPath代码缩进的空白字符，而不会受到作为XML上下文的自动副作用的缩进的干扰。

我想为左对齐模式提供视觉线索（在编辑器的不可编辑部分），这将对用户有所帮助，但又不会太复杂。

我尝试仅使用连接线，但是似乎太忙了。到目前为止，我所提出的最好的结果显示在下面的编辑器的模拟屏幕快照中，但是我正在寻找更好/更简单的替代方法（不需要太多的代码）。

[编辑]

以热图的想法（来自：@jimp），我得到了这个和3个替代方案-分别标记为a，b和c：

下一节将接受的答案描述为一个建议，将其他答案和评论中的想法汇集在一起​​。由于此问题现在是社区Wiki，请随时进行更新。

NestView

这个想法的名称提供了一种直观的方法，可以在不使用缩进的情况下提高嵌套代码的可读性。

等高线

NestView中不同阴影线的名称

上图显示了NestView，用于帮助可视化XML代码段。尽管XML用于此插图，但使用嵌套的任何其他代码语法也可以用于此插图。

概述：

1. 等高线被着色（如在热图中）以传达嵌套水平

2. 等高线倾斜以显示何时打开或关闭嵌套层。

3. 等高线将嵌套层的起点链接到相应的终点。

4. 除了热图之外，轮廓线的组合宽度还给人以嵌套层次的视觉印象。

5. NestView的宽度可以手动调整大小，但不应随代码更改而改变。轮廓线可以压缩或截断以保持这一点。

6. 有时使用空行代码将文本分解为更多可消化的块。这些行可能会在NestView中触发特殊行为。例如，可以重设热图或使用背景色轮廓线，或同时使用两者。

7. 与当前所选代码关联的一条或多条轮廓线可以突出显示。与所选代码级别关联的轮廓线将得到最大程度的强调，但其他轮廓线也可以“亮起”，以帮助突出显示包含嵌套的组

8. 可以在轮廓线上单击/双击不同的行为（例如代码折叠或代码选择）。

9. 等高线的不同部分（前缘，中间或后缘）可能具有不同的动态行为。

10. 可以在轮廓线上方的鼠标悬停事件上显示工具提示

11. 随着代码的编辑，NestView会不断更新。在嵌套不均衡的地方，可以假设嵌套层应该在哪里结束，但是必须以某种方式突出显示关联的临时轮廓线，以作为警告。

12. 可以支持轮廓线的拖放行为。行为可能会随所拖动的轮廓线的部分而变化。

13. 通常在左边距中发现的功能（例如行号和错误的颜色突出显示以及更改状态）可以覆盖NestView。

附加功能

该提案解决了一系列其他问题-许多问题超出了原始问题的范围，但产生了有益的副作用。

可视地链接嵌套区域的开始和结束

等高线连接每个嵌套层的起点和终点

突出显示当前选定行的上下文

选择代码后，可以突出显示NestView中关联的嵌套级别

区分同一嵌套级别的代码区域

对于XML，可以将不同的颜色用于不同的名称空间。编程语言（例如c＃）支持可以以类似方式使用的命名区域。

将嵌套区域内的区域划分为不同的可视块

通常在代码中插入多余的行以提高可读性。这样的空线可用于重置NestView等高线的饱和度。

多列代码视图

没有缩进的代码使使用多列视图更加有效，因为不太需要自动换行或水平滚动。在此视图中，一旦代码到达一列的底部，它将流入下一列：

用途不仅仅提供视觉帮助

正如概述中所建议的那样，NestView 可以提供一系列的编辑和选择功能，这些功能与TreeView控件的预期大致相符。关键区别在于，典型的TreeView节点分为两部分：扩展器和节点图标。NestView等高线最多可以包含3个部分：打开器（倾斜），连接器（垂直）和闭合（倾斜）。

压痕

与非缩进代码一起显示的NestView是对传统缩进代码视图的补充，但不太可能替代。

任何采用NestView的解决方案都可能会提供一种在缩进和非缩进代码视图之间无缝切换而又不影响任何代码文本本身（包括空格字符）的方法。缩进视图的一种技术是“虚拟格式设置”-使用动态左边界代替制表符或空格字符。用于动态呈现NestView的相同嵌套级数据也可以用于外观更传统的缩进视图。

列印

缩进对于打印代码的可读性很重要。在这里，没有制表符/空格字符和动态的左边距意味着文本可以在右边距处换行并仍然保持缩进视图的完整性。行号可用作可视标记，用于指示代码在何处换行以及缩进的确切位置：

屏幕真实状态：缩进与缩进

解决NestView是否用完宝贵的屏幕房地产的问题：

轮廓线的宽度与代码编辑器的字符宽度相同时，效果很好。因此，在轮廓线被截断/压缩之前，NestView宽度为12个字符的宽度可以容纳12个嵌套级别。

如果缩进视图的每个嵌套级别使用3个字符宽度，则将保留空间，直到嵌套达到4个嵌套级别为止。在此嵌套级别之后，平面视图具有节省空间的优点，该优势随每个嵌套级别而增加。

注意：对于代码，通常建议最小缩进4个字符的宽度，但是XML经常使用较少的字符。此外，虚拟格式化允许使用更少的缩进，因为没有对齐问题的风险

两种视图的比较如下所示：

基于以上所述，很可能可以得出这样的结论：视图样式的选择将基于屏幕不动产以外的因素。一个例外是屏幕空间非常宝贵，例如在上网本/平板电脑上或打开多个代码窗口时。在这些情况下，可调整大小的NestView显然是赢家。

用例

NestView可能是有用选项的实际示例：

1. 屏幕房地产非常珍贵

   一种。在平板电脑，记事本和智能手机等设备上

   b。在网站上显示代码时

   C。当需要同时在桌面上显示多个代码窗口时

2. 优先考虑代码中文本的一致空格缩进

3. 用于查看深层嵌套的代码。例如，在某些子语言（例如C＃中的Linq或XSLT中的XPath）可能导致高度嵌套的情况下。

辅助功能

必须提供调整大小和颜色的选项，以帮助视力障碍者，并适应环境条件和个人喜好：

编辑后的代码与其他系统的兼容性

理想情况下，包含NestView选项的解决方案应该能够从导入的代码中删除前导制表符和空格字符（标识为仅具有格式化作用）。然后，一旦删除，就可以在左对齐和缩进视图中整齐地呈现代码，而无需更改。对于许多依赖诸如合并和差异工具之类的系统的用户来说，这不是空白的，这将是一个主要的问题（如果不是一个完整的显示停止器）。

其他作品：

重叠标记的可视化

Wendell Piez于2004年发表的已发表研究致力于解决重叠标记（特别是LMNL）的可视化问题。其中包括与NestView建议书非常相似的SVG图形，因此在此得到了认可。

图像之间的视觉差异很明显（下图），主要的功能区别是NestView仅适用于嵌套良好的XML或代码，而Wendell Piez的图形旨在表示重叠的嵌套。

上面的图片经 http://www.piez.org 复制（经允许）。

资料来源：

1. 走向诠释标记
2. 迈向LMNL的半步

我试图在这里回答我自己的问题，但这是结合了@jimp的热图思想和@Andrea的“使其更加XML风格”的思想：

希望，热图中的颜色以及角度线有助于在开始标签和结束标签之间吸引眼球；删除水平线分隔符可以从头到尾改善“流程”。当用户选择元素时，可以通过某种方式突出显示热图中的匹配部分-可能带有发光的边框（如图所示）。

编辑 决定要使用此选项时，可能必须有颜色的用户选项。“生产就绪”屏幕截图：

为了比较...替代缩进视图：

立即编辑，以了解更多嵌套的情况-测试我的绘画技能...

一种想法可能是尝试在文本中添加3D。根据字体级别提高/减小字体大小。

例如，此代码：

看起来像这样：

使用它可能会很烦，因为它会丢失不同级别的固定文本大小对齐。另一个想法；更改每个级别的饱和度：

这对于真正深层的东西的支撑程度如何？不确定...

实际上，我非常喜欢您的装订线可视化想法；将事物组合在一起很容易。也许结合这些想法之一，它看起来会更好，或更糟糕。;）

不久前，我做了一个热图，显示了C语言的作用域。进行头脑风暴可能会很有趣：

左对齐：

只需调整您的原始想法，然后从正方形切换为胶囊。我认为这些版本（包括您的原始版本）更易于阅读，因为它们比通过嵌套显示元素来显示嵌套的版本更简单。我认为树元素以更简单，更直观的方式传达信息。

我认为左侧很适合直接显示缩进，而右侧更适合传达嵌套关系。

我的点子：

嵌套看起来更像是嵌套。每层的水平宽度不必太宽。

我喜欢这个主意。我建议保持“忙碌”状态是使用渐变而不是正方形。它将减少线路。可能有不同的颜色用于极端压痕。

我想说的是您拥有的一切都很棒，尽管就我的口味而言有些块状。

我的评论：我一直在为Visual Studio IDE的缩进方式而苦苦挣扎。我很乐意使用这种或其他形式。

因此，请想象该链接不包含任何行，并与当前的xml /代码内联。

因为您说过可视化必须存在于不可编辑的位置（左侧？），所以我认为这意味着可视化不能混合或位于代码之后。

也许在左栏中有一个热图，颜色较亮表示压痕更深？将边距设置为固定大小，并使用类似于您的可视化效果（期望像缩进一样从左到右），根据DOM深度确定的最大缩进动态地使用给定的所有空间。

如果您愿意进入编辑器区域，我建议您提出一些非常相似的内容，但以文档为背景。阴影区域将是这里的空白是，如果缺口被启用。在这种情况下，我将使用与文本突出显示形成对比的纯色，浅色。

jGRASP通过在边缘使用视觉标记来实现此目的：

它甚至可以识别何时使用循环，并使用不同类型的线表示该内部循环。

我以为我会指出现有编辑器是如何做到的。

这不是一个坏主意，但是必须参考左边距以清楚地看到我的方块可能会有些烦人。甚至都没有考虑屏幕的房地产，或者如果结构变得很深的话看起来会是什么样子。

由于这样做的动机是帮助用户“看到”他们用于缩进的空白字符，因此您只需向他们显示空白字符即可。

我不是在说特殊的视觉字符，例如段落标记，只是突出显示。黄色为空格，制表符为绿色（或其他符号）

对于边距/嵌套问题，您可以只移动每个块的边距。没有什么可以说边距必须是一条直线。

我确定这不是一个新主意。

像这样：

为什么不打开和关闭括号？

1. 缩进意味着遏制：（和）对程序员而言确实意味着遏制。
2. （和）都是单个字符：左栏将保持很细。
3. 空元素很容易被发现：在同一行上使用（）。
4. 元素的内容不需要视觉提示：空白更好。
5. 右侧的光标位置可以与左侧的包含块匹配：使用（和）向列中的字符动态添加颜色
6. 您可以使用<和>使它更像XML，从远处看起来更好。

Vim可以做类似的事情，尽管还不那么漂亮。

在Vim中有多种方法可以进行“代码折叠”。其中之一是基于语法折叠规则的。完成此操作后，可以使用嵌套的大纲结构折叠代码，并且可以使用“ FoldColumn”来给出“ foldlevel”的图形表示（实际上是“基于字符的” |”和“-”字符） 。

foldcolumn可以给出嵌套表示，而与foldmethod无关，但是基于语法的方法可能适合于您想要的方法。我不确定在某处是否存在针对xml的基于语法的预制折叠规则，我想可能会有。

我认为您在使用选项B和C的方向正确：同时包括宽度和热图着色。我现在比B更喜欢选项B，因为它的干扰性较小（要么宽而稀，要么狭窄而密集，而不是C中间的沉重障碍）。缺点是，使用该选项时，您必须如果在某处插入一个级别，则重建整个图形。我认为您可以将区块做得更小，1或2像素就足够了。不必太多，只需要区分即可。尤其是当人们期望人们多次使用该编辑器时，不易打扰，更微妙的效果将更易于使用，因为它们不会分散您的注意力。

使用排序编辑器时，重要的一件事是突出显示当前范围：在编辑器中选择一行时，您需要确切地看到它包含哪些元素以及在哪里停止。您甚至可以突出显示树（它是什么元素）。我认为这是一个单独的问题，需要解决和思考，并且将对用户如何评价编辑经验产生更大的影响。

我未曾提及的一件事是，您可以在似乎已确定的饱和效果之上使用色调进行处理。我的建议是更改指针所在巢的颜色。这样一来，与沿途的同级兄弟相比，用户可以更轻松地区分哪些行是嵌套的一部分。

在实现基于色相的东西时，请注意色盲，或者选择普遍可区分的颜色，或者为人们提供一些选择。

到目前为止，可以与其他建议一起使用的一个选项是在左边距上使用工具提示，该提示使用XPath表示法显示行的路径。浏览器的“检查元素”工具（例如Firebug，Chrome内置的工具）通常会在状态栏中执行类似的操作。

可能有一个热图的折叠视图（来自原始帖子），其中只有一列颜色和深度编号。这将使他们知道他们有多深，并为他们提供更多的xml屏幕资源。对我来说似乎是双赢。

我担心是否会有足够的颜色差异来深深地嵌套事物。