Markdown code blocks show up as grey on editing page but not published page

Educators Authoring
1

@mrtmm Any thoughts on the difference in grey code background formatting for editing Markdown vs. what students see? Code blocks show up as grey in editing view but not published view · Issue #42 · citynetwork/markdown-xblock · GitHub

2

AFAIK we are not doing much styling in the XBlock itself. I agree that the preview in Studio should ideally match what the learners will see, either both views should have the background or not. With that said, you can always add your own styling in your theme.

For example, if you are using the tutor-indigo theme, you can add the custom styling here: tutor-indigo/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_extras.scss at master · overhangio/tutor-indigo · GitHub

To add styling to any content in the markdown-xblock, you’ll want to define the class .markdown_xblock. To style inline code, define the code element and to style the codeblocks, define the pre element. For example:

.markdown_xblock {
  code {
    padding: 0 4px;
    border-radius: 3px;
    background: #eee;
    font-family: Monaco, monospace;
  }
  pre {
    padding: 0 4px;
    overflow: auto;
    background: #eee;
    border-radius: 3px;
    font-family: Monaco, monospace;
  }
}

Mind you, I am no expert on styling so this is just an example but it should be a good starting point. To apply the indigo theme with your customisations, please follow the readme in that repository, you’ll need to run tutor config save and rebuild the openedx image.

3

Thanks @mrtmm! That worked! :tada: I did

tutor local do settheme indigo_mine_palm
tutor config save
tutor images build openedx
tutor local launch

(I messed it up at first because I had an old theme indigo_mine which I accidentally set it to instead of indigo_mine_palm where the changes actually were. But then I eventually noticed my theme stuff was broken)

4

It did yes, I tested locally with the indigo theme and I only added that markdown bit.

That looks about right to me. Perhaps try also tutor local run lms openedx-assets build --env=local and tutor local start -d again?

5

Sorry, you were too fast for me! I corrected my above post at the same time as I saw your new post. Thanks again for all your help!

6

Awesome, happy to help! :slight_smile: