蒙地卡罗编辑器设置字体大小。

Question

我正在尝试通过样式化周围的div来设置monaco编辑器的字体大小。但这种方法不起作用。所以我看到monaco编辑器有一个属性font-size。所以我尝试了这个属性。不幸的是，这对我也没有起作用。最好的方法是使用CSS，因为我同时要样式化几件事情。

- Juhuy

Answer 1

有一种API可以设置字体大小、字体家族等属性。尽量不要在DOM中进行Hack操作，因为这可能在未来不兼容。

对于您的情况，请尝试以下方法：

var editor = monaco.editor.create(document.getElementById("container"), {
    value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
    language: "javascript",
    fontSize: "12px",
    lineNumbers: "off",
    roundedSelection: false,
    scrollBeyondLastLine: false,
    readOnly: false,
    theme: "vs-dark",
});

请查看Monaco Editor Playground for Basic Editor Options，开始输入属性。它将自动完成，并显示具有描述的所有可用配置属性 - 或者转到API文档参考。祝你好运。

- cancerbero

---

字段 fontSize 是一个数字，而不是一个字符串。该值被解析为一个数字，并忽略任何非数字的添加。然后将该值设置为 px。因此，例如将 16pt 设置为 16px，这两者并不相同。您可以在 playground 中进行检查。 - Mike Lischke

请参见 https://github.com/microsoft/monaco-editor/issues/2242 - Mike Lischke

Answer 2

我不确定是否可以使用 CSS 来为编辑器添加样式。但是，您可以使用 fontSize 属性来更改编辑器的字体大小。

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "javascript",
    fontSize: 20
});

- rcjsuen

---

太好了，Devid。你能在这儿分享给Juhuy解决方案吗？ - rcjsuen

Answer 3

在React Monaco中使用此选项属性。

      <Editor 
            height={config.height}
            defaultValue={config.value}
            theme={config.theme}
            language={config.language}
            onChange={handleEditorchange}
            options={{
                scrollBeyondLastLine:false,
                fontSize:"30px"
            }}
            />

- Naveenkumar M

Answer 4

在新版本中，fontSize 必须是一个数字。

<Editor
  height="100vh"
  width="100%"
  theme="vs-dark"
  defaultLanguage="javascript"
  defaultValue={code}
  options={{
    fontSize: 20,
  }}
/>

- ZARIF