Placeholder text should be styled as code

[nchammas]

This is another minor styling request in the same vein as #36.

The code editor supports placeholder text similar to st.text_area, which is great. However, by default it currently is styled as "normal" text with a proportional font. This looks weird.

Thankfully, we can fix this using the CSS tip shared over on #36.

I would make this the default styling for placeholder text.

For reference, this is the code I used to set and style a placeholder.

response = code_editor(
    ...
    options={
        "placeholder": "enter your code here",
    },
    component_props={
        "css": (
            """
            &.streamlit_code-editor .ace_scroller .ace_placeholder {
                font-family: monospace;
            }
            """
        ),
    },
)

Interestingly, if I provide placeholder to the props parameter instead of the options parameter, it still works but looks very misaligned.

This is a separate issue, but I thought I'd mention it in passing here.

[bouzidanas]

I believe the placeholder for the props is more for label/instructions with code already in the editor which is why it sits above the first line of code.