|
|
|
|
| export const DEFAULT_CSS = `/** here you can write css**/
|
| h1 {
|
| color: whitesmoke;
|
| }`
|
| export const DEFAULT_HTML = `<p style='color:red;font-family:monospace'>
|
| Note+
|
| </p>`
|
| export const DEFAULT_MD = '# 📝 Note+'
|
| export const DEFAULT_MODE = 'markdown'
|
| export const DEFAULT_THEME = 'one_dark'
|
|
|
| export const DEMO_CONTENT = `
|
| # @mtb/svelte-markdown.
|
| ## This is a subheader
|
|
|
| [](https://github.com/melMass/comfy_mtb/actions/workflows/test_embedded.yml)
|
| 
|
|
|
| <details>
|
| <summary>More details about the inception of the project</summary>
|
|
|
| \`\`\`js
|
| class YesMan{
|
| constructor(){
|
| this.started = false
|
| }
|
| }
|
| \`\`\`
|
| </details>
|
|
|
| This is a paragraph. If it goes over the maximum width it will not automatically wrap unless it reaches the max-w of \`prose\` check [styles](/styles) for more info.
|
|
|
| This component is useful for building some tools on top. Or even just a static system using svelte at its core. My personal blog is fully powered by **@mtb/svelte-markdown**
|
|
|
| | And this is | A table |
|
| |-------------|---------|
|
| | With two | columns |
|
|
|
| We also support github callout:
|
|
|
|
|
| > [!NOTE]
|
| > Highlights information that users should take into account, even when skimming.
|
| > [!TIP]
|
| > Optional information to help a user be more successful.
|
|
|
|
|
| > [!IMPORTANT]
|
| > Crucial information necessary for users to succeed.
|
|
|
| > [!WARNING]
|
| > Critical content demanding immediate user attention due to potential risks.
|
|
|
| > [!CAUTION]
|
| > Negative potential consequences of an action.
|
| `
|
|
|
| export const THEMES = [
|
| 'ambiance',
|
| 'chaos',
|
| 'chrome',
|
| 'cloud9_day',
|
| 'cloud9_night',
|
| 'cloud9_night_low_color',
|
| 'cloud_editor',
|
| 'cloud_editor_dark',
|
| 'clouds',
|
| 'clouds_midnight',
|
| 'cobalt',
|
| 'crimson_editor',
|
| 'dawn',
|
| 'dracula',
|
| 'dreamweaver',
|
| 'eclipse',
|
| 'github',
|
| 'github_dark',
|
| 'gob',
|
| 'gruvbox',
|
| 'gruvbox_dark_hard',
|
| 'gruvbox_light_hard',
|
| 'idle_fingers',
|
| 'iplastic',
|
| 'katzenmilch',
|
| 'kr_theme',
|
| 'kuroir',
|
| 'merbivore',
|
| 'merbivore_soft',
|
| 'mono_industrial',
|
| 'monokai',
|
| 'nord_dark',
|
| 'one_dark',
|
| 'pastel_on_dark',
|
| 'solarized_dark',
|
| 'solarized_light',
|
| 'sqlserver',
|
| 'terminal',
|
| 'textmate',
|
| 'tomorrow',
|
| 'tomorrow_night',
|
| 'tomorrow_night_blue',
|
| 'tomorrow_night_bright',
|
| 'tomorrow_night_eighties',
|
| 'twilight',
|
| 'vibrant_ink',
|
| 'vscode',
|
| ]
|
|
|
| export const CSS_RESET = `
|
| * {
|
| line-height: 1.25em;
|
| }
|
| .shiki{
|
| padding: 1em;
|
| width: 100%;
|
| }
|
| .markdown-callout-title {
|
| .octicon{
|
| fill:white;
|
| width:29px;
|
| height:29px;
|
| }
|
| /* background: var(--current-color); */
|
| color: var(--current-color);
|
| font-weight: bold;
|
| /* border-start-end-radius: var(--radius); */
|
| /* border-start-start-radius: var(--radius); */
|
| padding: 0.5em;
|
| padding-inline-start: 1em;
|
| display: flex;
|
| align-items: center;
|
| }
|
| .markdown-callout-content {
|
| padding: 1em;
|
| }
|
| .markdown-callout {
|
| --radius: 8px;
|
| --current-color: purple;
|
| /* border-start-end-radius: var(--radius); */
|
| /* border-start-start-radius: var(--radius); */
|
| border-left: 3px solid var(--current-color);
|
| margin-bottom: 1em;
|
| margin-top: 1em;
|
|
|
| }
|
| .markdown-callout p:nth-child(2) {
|
| padding:1em;
|
| }
|
|
|
|
|
| .markdown-callout-tip {
|
| --text-color: whitesmoke;
|
| --current-color: #50e3c2;
|
| }
|
|
|
| .markdown-callout-note {
|
| --text-color: whitesmoke;
|
| --current-color: #0070f3;
|
| }
|
| .markdown-callout-important {
|
| --text-color: whitesmoke;
|
| --current-color: #7928ca;
|
| }
|
| .markdown-callout-warning {
|
| --current-color: #f5a623;
|
| }
|
| .markdown-callout-caution {
|
| --current-color: #e60000;
|
| }
|
|
|
|
|
| .note-plus-preview {
|
| display:flex;
|
| flex-direction:column;
|
| align-items: flex-start;
|
| width:95%;
|
| /*margin-left: 20px;*/
|
| /*margin-top:20px;*/
|
|
|
| /*background-color: rgba(255,0,0,0.5)!important;*/
|
| }
|
|
|
| /* allowed to be selected*/
|
| h1, h2, h3, h4, h5, h6,a, p, ul, ol, dl, blockquote,details,summary {
|
| pointer-events:auto;
|
| user-select:text;
|
| }
|
|
|
| h1, h2, h3, h4, h5, h6 {
|
| display:inline-block;
|
| margin: 0;
|
| padding: 0;
|
| font-weight: normal;
|
| }
|
|
|
| p, ul, ol, dl, blockquote {
|
| margin: 0.3em;
|
| padding: 0;
|
| }
|
|
|
| ul, ol {
|
| padding-left: 1em;
|
| }
|
|
|
| a {
|
| color: inherit;
|
| text-decoration: none;
|
| pointer-events: all;
|
| color: cyan;
|
| }
|
|
|
| img {
|
| padding: 1em 0;
|
| max-width: 100%;
|
| }
|
|
|
| iframe {
|
| max-width: 100%;
|
| height: auto;
|
| border:none;
|
| pointer-events:all;
|
| }
|
|
|
| blockquote {
|
| border-left: 4px solid #ccc;
|
| padding-left: 1em;
|
| margin-left: 0;
|
| font-style: italic;
|
| }
|
|
|
| pre, code {
|
| font-family: monospace;
|
| }
|
|
|
| table {
|
| border-collapse: collapse;
|
| width: 100%;
|
| border-bottom: 1px solid #000;
|
| margin: 1em 0;
|
| }
|
|
|
| th, td {
|
| border-left: 1px solid #000;
|
| border-right: 1px solid #000;
|
| padding: 8px;
|
| text-align: left;
|
| }
|
|
|
| th {
|
| border: 1px solid #000;
|
| background-color: rgba(0,0,0,0.5);
|
| }
|
|
|
| input[type="checkbox"] {
|
| margin-right: 10px;
|
| }
|
| `
|
|
|
