Underscore disappear

[hdsuperman]

Underscore disappear in ace editor (at right)

chrome: (left: in kitchen-sink , right: in real environment)

firefox is ok:

opera has error too:

code :

<template>
  <div></div>
</template>

<script lang="ts">

  import {Vue, Component, Prop} from "vue-property-decorator";
  import ace from 'ace-builds';
  import 'ace-builds/webpack-resolver';
  import 'ace-builds/src-noconflict/theme-github';
  import 'ace-builds/src-noconflict/mode-markdown';

  @Component
  export default class SuCodeEditor extends Vue {
    @Prop({type: Number, default: 10}) minLines!: number;

    @Prop({type: Number, default: 20}) maxLines!: number;

    @Prop({type: Number, default: 14}) fontSize!: number;

    @Prop({type: Boolean, default: true}) showGutter!: boolean;

    aceEditor: any = null;
    themePath: string = 'ace/theme/github';
    modePath: string  = 'ace/mode/markdown';

    mounted() {
      this.aceEditor = ace.edit(this.$el, {
        behavioursEnabled: true,
        highlightActiveLine: false,
        showGutter: this.showGutter,


        maxLines: this.maxLines, // 最大行数，超过会自动出现滚动条
        minLines: this.minLines, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
        fontSize: this.fontSize,            // 编辑器内字体大小
        theme: this.themePath,   // 默认设置的主题
        mode: this.modePath,     // 默认设置的语言模式
        tabSize: 4               // 制表符设置为 4 个空格大小

      });
    }
  }
</script>

<style scoped>

</style>

[nightwing]

Which font are you using?

does it help if you add one of the following css snippets?

.ace_editor {
    line-height: 2;
}

or

.ace_editor * {
    contain: none!important; 
}

[albfan]

I think this is related node-red/node-red#2104 (comment)

As soon as you zoom-in underscore is seen:

• 100%:
• 110%:

font-family for ACE editor is:

font-family: Menlo,Consolas,"DejaVu Sans Mono",Courier,monospace !important;

If you do not have that fonts installed it is not seen. As soon as you remove that property underscore is seen.

With that property it renders to Arial:

Removing the property it renders to Ubuntu mono here (Arch linux):

So basically, it is using a no monospace font, that renders underscore behind the bottom line (hidding it).

I found a similar report here:
rust-lang/mdBook#1061

[olliecwd]

Hi, I had this issue too, at least when using the react-ace wrapper. I was able to get round it by setting the lineHeight sufficiently high. For the font I was using (Droid Sans Mono), any line height below 18px wouldn't render the underscores at default zoom. However, with line heights above 18px, the underscores would always show, no matter how zoomed you were. These values are likely to vary from font to font. I have no clue why this is the case, but it appears to work.

[albfan]

Yep, see this fix on node-red

https://github.com/node-red/node-red/pull/2579/files

[andrewnester]

Is this still reproducible on the latest Ace version?

[github-actions]

This issue has not received a response in a while. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.