Home Original page

Allow style in span in markdown by alexr00 · Pull Request #97793 · microsoft/vscode

I was actually reminded of another method that I have used for markdown in the past which is to just use an external css file that is included in then provide support using custom approved html elements instead.

This can be quite a nice solution for this and allows defining some styles people can use in the markdown they provide you without exposing all styling.

> <important /> This API will be superseded by an all-new API in June 2020. It is not recommended to start 
> new development projects using this API. Documentation for the new API will be available prior to its release.

image

I used css variables in this implementation since we did also allow setting them via html but that would then require the style prop so prob not ideal for this situation :). perhaps attr() https://developer.mozilla.org/en-US/docs/Web/CSS/attr

  > <warn style='--title: "Disclaimer"' /> 
  > This is a custom disclaimer blockquote

image

I am not sure if the shortcut of not wrapping it was something custom or not, it has been awhile, but it renders:

<blockquote>
<p><important> This API will be superseded by an all-new API in June 2020. It is not recommended to start 
new development projects using this API. Documentation for the new API will be available prior to its release.</important></p>
</blockquote>
:root {
  --note: steelblue;
  --important: red;
  --warn: orange;
  --tip: rgb(50, 189, 91);
  --info: rgb(30, 153, 147);
}

blockquote {
  color: #333333 !important;
  position: relative;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  background-color: #fcfcfc;
  padding: 20px !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border-left: 0 !important;
}

blockquote p {
  margin: 0 !important;
  margin-bottom: 5px !important;
  margin-top: 5px !important;
  padding-left: 5px !important;
}

blockquote li {
  margin-top: 15px;
}

blockquote::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

blockquote::before {
  background-color: steelblue;
}

blockquote note::after,
blockquote tip::after,
blockquote important::after,
blockquote warn::after,
blockquote custom::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

blockquote important::before {
  content: var(--title, "IMPORTANT");
  color: var(--color, var(--important));
}

blockquote important::after {
  background-color: var(--color, var(--important));
}