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

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

Parents
  • 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.

Reply
  • 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.

Children
  • 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. 

  • Thank you for the information, I'll have to get someone to help me investigate.

  • Hi Micheal,

    I have added the .ace_editor in the Custom Styles. However that did not fix the issue. The custoom CSS is coming from .mceInsertEmbeddableItem. The Tiny MCE media plugin's CSS is being used. Where would I edit the CSS for that?

  • Sounds like some customizations might be colliding somewhere. The .mceInsertEmbeddableItem styling  shouldn't apply to the code editor unless there's been some sort adjustment somewhere.

    I'd track down why the .mceInsertEmbeddableItem selector is matching the code editor, since by default it does not. 

  • Hi Michael, the tinyMCE plugin is only used for the preview mode.

    However once I save the question, the ace_editor CSS is being used. It is already in monospace but still not showing the code right.