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

我已经编写了一个XML文本编辑器，该编辑器为相同的XML文本提供2个视图选项，一个缩进（虚拟），另一个向左对齐。左对齐视图的动机是帮助用户“看到”他们用于纯文本或XPath代码缩进的空白字符，而不会受到缩进的干扰，缩进是XML上下文的自动副作用。 >
我想为左对齐模式提供视觉线索（在编辑器的不可编辑部分），这将对用户有所帮助，但又不会太复杂。

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



[编辑]

以热图的想法（来自：@jimp）我得到了这3种选择-分别标记为a，b和c：



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


NestView

这个想法的名称提供了一种视觉方法来提高可读性。

等高线

NestView中不同阴影线的名称



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

概述：


轮廓线是着色（如在热图中）以传达嵌套级别
等高线会倾斜以显示嵌套级别是打开还是关闭的时间。
等高线将嵌套级别的起点链接到相应的级别结束。
等高线的组合宽度除了提供热图外，还给人以嵌套层次的视觉印象。
NestView的宽度可以手动调整大小，但不应随代码的更改而改变。可以压缩或截断等高线以保持这种效果。
有时用空白行代码将文本分解为更易于消化的块。这些行可能会在NestView中触发特殊行为。例如，可以重设热图或使用背景色轮廓线，或同时使用两者。
可以突出显示与当前所选代码关联的一个或多个轮廓线。与所选代码级别关联的轮廓线将得到最大程度的强调，但是其他轮廓线也可以“点亮”，以帮助突出显示包含嵌套组的嵌套行为。不同的行为（例如代码折叠或代码选择）可以可以与单击/双击轮廓线相关联。
轮廓线的不同部分（前缘，中间或后缘）可能具有不同的动态行为。
可以在鼠标悬停时显示工具提示等高线发生事件
随着代码的编辑，NestView会不断更新。在嵌套不均衡的情况下，可以做出以下假设：嵌套层应该终止，但是必须以某种方式突出显示关联的临时轮廓线，以作为警告。
可以支持轮廓线的拖放行为。行为可能会随所拖动轮廓线的不同而有所不同。
在左边距中常见的功能（例如行号和错误突出显示的颜色和更改状态的颜色）可能会覆盖NestView。

附加功能

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

直观地将开始和结束联系起来嵌套区域的轮廓

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

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

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

在代码区之间进行区分相同的嵌套级别

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

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

通常会插入多余的行代码以提高可读性。这样的空行可用于重置NestView轮廓线的饱和度级别。

多列代码视图

不带缩进的代码使用了多列视图效果更好，因为不太需要自动换行或水平滚动。在这种情况下，一旦代码到达一列的底部，它就会流入下一列：



用途不仅是提供视觉辅助

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


在压痕上

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

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

打印

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



屏幕实状态：平面Vs缩进

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

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

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

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

下面两个视图的比较如下所示：



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

用例

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



屏幕房地产十分珍贵

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

b。在网站上显示代码时

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

优先考虑代码中文本的空白空格缩进
用于查看深层嵌套的代码。例如，在某些子语言（例如C＃中的Linq或XSLT中的XPath）可能导致高度嵌套的情况下。

可访问性

必须提供调整大小和颜色选项以帮助那些具有视觉障碍，还适合环境条件和个人喜好：



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

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


其他作品：

重叠标记的可视化

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

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

/www.piez.org

资料来源：


走向诠释标记法
迈向LMNL的半步路


/>