Markdown embed sample MD file

[zsviczian]

markdown-css.md
see this video for details: https://youtu.be/K6qZkTz8GHs

Since the video, I have added a footer element .excalidraw-md-footer which you can use to add bottom padding in case you are not displaying the whole document, but only the top section, and you would like to add some bottom padding. (see issue explained here).

Also note, that the way I add a document border has changed compared to the example in the video.

.excalidraw-md-host {
 padding: 0px 15px;
}

.excalidraw-md-footer {
  height: 5px;
  display: block;
}

foreignObject {
 background-color: whitesmoke;
}

svg {
  border: 2px solid;
  transform: scale(0.985);
  color: skyblue;
}

p {
 display: block;
 margin-block-start: 1em;
 margin-block-end: 1em;
 margin-inline-start: 0px;
 margin-inline-end: 0px;
 }

mark {
  color: inherit;
}

table,tr,th,td {
 color: inherit;
 border: 1px solid;
 border-collapse: collapse;
 padding: 3px;
}

th {
 font-weight: bold;
 border-bottom: double;
 background-color: silver;
}

[zsviczian]

Add this file to your Obsidian Vault: markdown-css.md

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  color: inherit;
}

table,tr,th,td {
  color: inherit;
  border: 1px solid;
  border-collapse: collapse;
  padding: 3px;
}

th {
  font-weight: bold;
  border-bottom: double;
  background-color: silver;
}

.copy-code-button {
  display: none;
}

/**
* VS theme by Andrew Lock (https://andrewlock.net)
* Inspired by Visual Studio syntax coloring
*/

code[class*="language-"],
pre[class*="language-"] {
  color: #393A34;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  font-size: .9em;
  line-height: 1.2em;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre > code[class*="language-"] {
  font-size: 1em;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  background: #C1DEF1;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  background: #C1DEF1;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
  border: 1px solid #dddddd;
  background-color: white;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .2em;
  padding-top: 1px;
  padding-bottom: 1px;
  background: #f8f8f8;
  border: 1px solid #dddddd;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #008000;
  font-style: italic;
}

.token.namespace {
  opacity: .7;
}

.token.string {
  color: #A31515;
}

.token.punctuation,
.token.operator {
  color: #393A34; /* no highlight */
}

.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.inserted {
  color: #36acaa;
}

.token.atrule,
.token.keyword,
.token.attr-value,
.language-autohotkey .token.selector,
.language-json .token.boolean,
.language-json .token.number,
code[class*="language-css"] {
  color: #0000ff;
}

.token.function {
  color: #393A34;
}

.token.deleted,
.language-autohotkey .token.tag {
  color: #9a050f;
}

.token.selector,
.language-autohotkey .token.keyword {
  color: #00009f;
}

.token.important {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.class-name,
.language-json .token.property {
  color: #2B91AF;
}

.token.tag,
.token.selector {
  color: #800000;
}

.token.attr-name,
.token.property,
.token.regex,
.token.entity {
  color: #ff0000;
}

.token.directive.tag .tag {
  background: #ffff00;
  color: #393A34;
}

/* overrides color-values for the Line Numbers plugin
* http://prismjs.com/plugins/line-numbers/
*/

.line-numbers.line-numbers .line-numbers-rows {
  border-right-color: #a5a5a5;
}

.line-numbers .line-numbers-rows > span:before {
  color: #2B91AF;
}

/* overrides color-values for the Line Highlight plugin
* http://prismjs.com/plugins/line-highlight/
*/

.line-highlight.line-highlight {
  background: rgba(193, 222, 241, 0.2);
  background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
  background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
}

[zsviczian]

This is the latest version of the markdown-css that comes built-in with Excalidraw-Obsidian (as of 5 November 2022)

.excalidraw-md-host {
  padding:0px 10px
}

.excalidraw-md-footer {
  height:5px
}

foreignObject {
  background-color:transparent
}

p {
  display:block;
  margin-block-start:1em;
  margin-block-end:1em;
  margin-inline-start:0px;
  margin-inline-end:0px;
  color:inherit
}

table,tr,th,td {
  color:inherit;
  border:1px solid;
  border-collapse:collapse;
  padding:3px
}

th {
  font-weight:bold;
  border-bottom:double;
  background-color:silver
}

.copy-code-button {
  display:none
}

code[class*=language-],pre[class*=language-] {
  color:#393a34;
  font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  direction:ltr;
  text-align:left;
  white-space:pre;
  word-spacing:normal;
  word-break:normal;
  font-size:.9em;
  line-height:1.2em;
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens:none;
  hyphens:none
}

pre>code[class*=language-] {
  font-size:1em
}

pre[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
code[class*=language-] ::-moz-selection {
  background:#C1DEF1
}

pre[class*=language-]::selection,
pre[class*=language-] ::selection,
code[class*=language-]::selection,
code[class*=language-] ::selection {
  background:#C1DEF1
}

pre[class*=language-] {
  padding:1em;
  margin:.5em 0;
  overflow:auto;
  background-color:#0000001a
}

:not(pre)>code[class*=language-] {
  padding:.2em;
  padding-top:1px;
  padding-bottom:1px;
  background:#f8f8f8;
  border:1px solid #dddddd
}

.token.comment,.token.prolog,.token.doctype,.token.cdata {
  color:green;
  font-style:italic
}

.token.namespace {
  opacity:.7
}

.token.string {
  color:#a31515
}

.token.punctuation,.token.operator {
  color:#393a34
}

.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.inserted {
  color:#36acaa
}

.token.atrule,
.token.keyword,
.token.attr-value,
.language-autohotkey .token.selector,
.language-json .token.boolean,
.language-json .token.number,
code[class*=language-css] {
  color:#00f
}

.token.function {
  color:#393a34
}

.token.deleted,
.language-autohotkey .token.tag {
  color:#9a050f
}

.token.selector,
.language-autohotkey .token.keyword {
  color:#00009f
}

.token.important {
  color:#e90
}

.token.important,
.token.bold {
  font-weight:bold
}

.token.italic {
  font-style:italic
}

.token.class-name,
.language-json .token.property {
  color:#2b91af
}

.token.tag,
.token.selector {
  color:maroon
}

.token.attr-name,
.token.property,
.token.regex,.token.entity {
  color:red
}

.token.directive.tag .tag {
  background:#ffff00;
  color:#393a34
}

.line-numbers.line-numbers .line-numbers-rows {
  border-right-color:#a5a5a5
}

.line-numbers .line-numbers-rows>span:before {
  color:#2b91af
}

.line-highlight.line-highlight {
  background:rgba(193,222,241,.2);
  background:-webkit-linear-gradient(left,rgba(193,222,241,.2) 70%,rgba(221,222,241,0));
  background:linear-gradient(to right,rgba(193,222,241,.2) 70%,rgba(221,222,241,0))
}

blockquote {
 font-style:italic;
  background-color:rgb(46,43,42,0.1);
  margin:0;
  margin-left:1em;
  border-radius:0 4px 4px 0;
  border:1px solid hsl(0,80%,32%);
  border-left-width:8px;
  border-top-width:0px;
  border-right-width:0px;
  border-bottom-width:0px;
  padding:10px 20px;
  margin-inline-start:30px;
  margin-inline-end:30px;
}

.snw-reference {
  display: none;
}

[iNarcissuss]

Hi,

I have a problem using this Md-embed feature. I have some markdown tables that I want to drag into Excalidarw. These tables are some C++ structures actually, like this one below.

| RTL_ATOM_TABLE    |
|:------------------|
| Signature;        |
| CriticalSection;  |
| RtlHandleTable;   |
| NumberOfBuckets   |
| Buckets[1];       |  

After one markdown table is dragged into Excalidraw by using Ctrl + Drag, I find that its width and height cannot be easily adjusted. I can only resize the entire picture (width + height together).

What I want is that the wrapper (maybe SVG or foreignObject) fits its content (the markdown table), or its width and height could be adjusted individually.

I have tried this CSS code, but no luck. I am not familiar with CSS and JavaScript. Someone at stackoverflow says that there is no way to resize SVG without scripting. I am not sure that.

Could you tell me how to adjust width or height? Is there a CSS way to do it? Or do I have to learn Excalidraw Automate to do it? Or maybe this is a feature in next Excalidraw version just in case.