Morphological distinction in markdown, input, and output.

[kkoudas01]

It would be useful to have the ability for morphological differentiation of the text (markdown), the input, and the output, similar to what exists in the Mathematica notebook. This facilitates both the composition of a notebook and its subsequent reading (in .html or .wln format).

[JerryI]

It's been a while since this topic was brought up for discussion.
This needs a clever design solution. One possible option is to try this for a moment:

paste it to the settings

.cin > div::after {
    content: '';
    width: 0.3rem;
    height: 100%;
    position: absolute;
    top: 0;
    background: #efefef;
    left: -0.75rem;
    border-radius:0.15rem
}

[JerryI]

How it might look like

[kkoudas01]

Thank you! It works!

I realized that with this, I can set the color of each input — whether it's markdown or Wolfram. From what you said, I assume that having 5 different color schemes (background, input markdown, output markdown, input Wolfram, output Wolfram) is not possible at the moment. Is that correct?

Either way, thank you for your answer!

[JerryI]

Correct. Editor does not supply the styling information regarding the language used in the input cell for now, only output cells are well described.

[kkoudas01]

Got it! Thank you!

[kkoudas01]

Also, these morphological changes are not reflected in the HTML.

[JerryI]

This we can fix soon. As a temporal solution for your existing HTML notebooks one can create, evaluate and hide the following cell

.wlx

<style>
.cin > div::after {
    content: '';
    width: 0.3rem;
    height: 100%;
    position: absolute;
    top: 0;
    background: #efefef;
    left: -0.75rem;
    border-radius:0.15rem
}
</style>

[kkoudas01]

Thank you very much!

I wrote:

.wlx

<style>
.cin > div::after {
    content: '';
    width: 0.3rem;
    height: 100%;
    position: absolute;
    top: 0;
    background: #aab3bd;
    left: -0.75rem;
    border-radius:0.15rem;
}
</style>

(I changed the color a little.) Unfortunately, this did not appear in the HTML.

It's okay. It's not that important. Thank you anyway for the effort!

[JerryI]

Sorry for that. I just have found another bug, that cin. and cout classes are not passed to generated file. :/

Well, we shall fix that

[JerryI]

we are working on a way for an editor to pass those listed classes for input cells. Then it will be possible to style based on language as well.

[JerryI]

Improved in https://github.com/WLJSTeam/wolfram-js-frontend/releases/tag/v2.8.2
Please see updated classes for styling: https://wljs.io/frontend/Advanced/Styling

It will work in exported HTML as well

[kkoudas01]

Good evening!

First of all, thank you very much for your reply!

I wrote the following in the Custom CSS. In general, the .wln changes its appearance, but the .html it gets converted to keeps its usual appearance, not the one I configured. Am I doing something wrong, or was this to be expected?

/* ===========================
   NOTEBOOK CELL STYLING
   =========================== */

/* 1. INPUT: Wolfram Language */
.cin {
  background: #6699cc;              /* Dark background */
  border-left: 4px solid #ff0080;   /* Neon pink left border */
  color: #f70000;                   /* Light text */
  padding: 0.5em;
  border-radius: 6px;
  margin: 0.5em 0;
}

/* 2. OUTPUT: Wolfram Language */
.cout {
  background: #1a1a1a;              /* Slightly lighter dark */
  border-left: 4px solid #00ffaa;   /* Neon green line */
  color: #e0e0e0;
  padding: 0.5em;
  border-radius: 6px;
  margin: 0.5em 0;
}

/* 3. INPUT: Markdown */
.cin .clang-markdown {
  background: #222;
  border-left: 4px solid #ffcc00;   /* Yellow line */
  color: #ffffff;
  font-style: italic;
  padding: 0.5em;
  border-radius: 6px;
  margin: 0.5em 0;
}

/* 4. OUTPUT: Markdown */
.cout .markdown {
  background: #333;
  border-left: 4px solid #0099ff;   /* Blue line */
  color: #f8f8f2;
  padding: 0.5em;
  border-radius: 6px;
  margin: 0.5em 0;
}

/* Optional: Customizing headings inside Markdown output */
.cout .markdown h1 {
  color: #ff99cc;
}
.cout .markdown h2 {
  color: #99ccff;
}
.cout .markdown h3 {
  color: #66ccff;
}

[JerryI]

Hi there!
I just have tried on 2.8.2.

No reboot is required to see the effect on HTML exported file