Insert Code: Is it possible to set fixed width font?

Question

Our developers are wanting the Insert Code functionality to render the code with fixed width font like it shows in edit mode. 
 
 In edit mode:

After publishing:

Is this possible to change somewhere? If so, if there's a small change, i'd appreciate guidance to work with one of my developers to implement it. Thanks, 
 Emily

Michael Kelley · Answer

Emily, Interestingly, this should be displaying monospaced already. It should be using the following font style : font : 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace ; From your screenshots it appears that this is being overridden within CSS somewhere to a non-monospace font. You could add a new override to your Dynamic Styles located under Site Root > Management (Pencil) > Manage Site Theme > Edit This Theme > Custom Styles I would recommend the following: .ace_identifier {
 font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
} 
 Depending on the override that is forcing this issue you may need other overrides as well.

Michael Monteleone · Answer

Agreed. As a test, here's a similar embedding in this community which retains formatting. 
 -----BEGIN PGP PUBLIC KEY BLOCK-----

mQENBFylDwwBCAChmX/M8tSgdJGuvqqvgkcKfc5XRONiZzkHfwlddeOMyjern4U8
0GMf4S/s52PI0s8eesOxKnY4MElT0aD3Ybo68d0EvhvD31oirtoldnbOaGImDxIt
Sd3Dn3uoZdd2MbJIy+UAUDF/meq9gb3uvUWCqVmRe+pDoXToI2OPpNXv8IGu7Fvf
nXjW6/Tw35UJ/X6WqEagHq/qEHJV6xgeyKZ+Xt0zgfMbAI+wyn2r50bWvsO30/+B
uehervy4PBnAUb5/wHvb5oIhEsRm5lYzdIHBRrb1/365GWB91woRYBfQ+zwzO2dA
/vzLr8aGSgN1Oc/2kLlY36sxH3o1OMsDUDaZABEBAAG0GWFiY2RlIDxhYmNkZUBh
YmNkZS5hYmNkZT6JAVQEEwEIAD4WIQRQdMz4eJMv5XYJOVgkYR7zxtwEOgUCXKUP
DAIbAwUJA8JnAAULCQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRAkYR7zxtwEOktB
B/0U+xpPuaEi27PqXUPkI+MvTTDJXGKbAfT59a78hMiEEpSlTH+mklUWugFmIemI
BKioPzFPQ6uEJskS5mGCjyvdA0VcD/SLAAcE8VUMkitWsgKnDloEjywC6jNhPcRf
/OU3JsS3QiomD+d04BCYaXFbOaRnuqJCzD0GtYnlvo8QbzlsxjLjjNHdlUdJyqcd
qTI9cStdEh4rMcAao0QZkvVIuGpqCn/ixdTmrv+ua4IwgBVZJc36ezHbwoX2xPrM
L9VnvmXuwTrbA6X7u1o/W1Dsc5sDGWuHZxK/WznFwbzbCM61SEoleiOc9GVWv4a7
ZLZh6gXmKbl+RSZjCx6bjkSzuQENBFylDwwBCADikdaUMxQSgEyWTlis7uRy8Dq5
nLlRHTEsoVt+h5g4TGgPapgXKTm97kt4DamAiXTZX1M9j5Z05GCwUmIsUDEA9KQl
5ctb0yXrH9E0gcHZDjdA438KqF6JUKFbLGWRJGWHAeL7ps7TCujYq55y4bhDFAhr
zwY3xcEe/P28Ensf2HLQ63cWGK0Kics3K/urh2n0MWkytW5OrzhNfA2uP7se3Ket
X6tdQPcfN86FzqsXHL2c/3QL93lh1iikfuZsJAJD2f0+DMXUbpupFmlTg1CEEGXH
NnTTzG8115Ph+CNcxxwzRhlbg0akmwjWINjKnPcn1ON8soXPG9NzcWoAQO83ABEB
AAGJATwEGAEIACYWIQRQdMz4eJMv5XYJOVgkYR7zxtwEOgUCXKUPDAIbDAUJA8Jn
AAAKCRAkYR7zxtwEOsj4CACWLCWyOAeLyIUgScGylPV5+JR+jPK0dxFjphtF3O5q
m69opKcpt74k9tskaa1bpcmh6Rl3QjaEYJdiH6UO6yaS2NQb72Jxe/l0H4R/UYpe
QV8be/KI1ir16SwNLyDEVPuF9J5dQMVB1sC9j27Xm2hdnJUesrzF1EeQ7I09okUw
BLBTl7yUmaXdPXdihGbbMkxq9TcOXNPC1D/ddUYu3POsfnORZe/OctrBY16MmGT+
0Ll3gH6o6XXyxr62m49/gXCV2CmDImqCathIlbkvOQ/NITrhW4jbTq51T/c0yYJc
77AeniVuDkO5lpRzbwOXyGpNtHzEIy+tKV5ytXayupFk
=Ziis
-----END PGP PUBLIC KEY BLOCK----- 
 Also, it's .ace_editor, not .ace_identifier. 
 .ace_editor {
 font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
} 
 However, depending on the custom CSS, it may not even be referencing that at all. Chrome's dev tools can help pinpoint what is overriding.

Insert Code: Is it possible to set fixed width font?

Top Replies