How to make the text appear the same in edit mode and in View mode? #2485

jhon65496 · 2024-03-04T17:58:33Z

How to make the text appear the same in edit mode and in View mode?

I have fixed the text-editor file.theme.
The file is located in the folder c:\Users\Root\AppData\Roaming\VNote\VNote\themes\vue-light\text-editor.theme

Become

"kdown-syntax-styles" : {
"H1" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 15
},
"H2" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 14
},
"H3" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 13
},
"H4" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 12
},
"H5" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 11
},
"H6" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 10
},

It was

"markdown-syntax-styles" : {
"H1" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 17
},
"H2" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 16
},
"H3" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 15
},
"H4" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 14
},
"H5" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 13
},
"H6" : {
    "text-color" : "#222222",
    "bold" : true,
    "font-size" : 12
},

Now it looks like
Edit mode

View mode

Theme

Update-1

I want the display (and fonts) in reading mode to be similar to the display(and fonts) as in edit mode.
Minimally, I want to
- in reading mode the font was straight. Now the font is slanted (I can't find the Italic:true parameter in the web.css file);
- in reading mode, the font height was the same as in editing mode.

web.css

File web.css.

body {
    margin: 0 auto;
    font-family: "YaHei Consolas Hybrid", "Noto Sans", "Helvetica Neue", "Segoe UI", Helvetica, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "冬青黑体", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体", "Apple Color Emoji", "Segoe UI Emoji";
    color: #34495E;
    line-height: 1.5;
    padding: 0;
    background-color: #ffffff;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    color: #34495e;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 0;
}

p,blockquote,table {
    margin: 1.2em 0;
}

ul,ol,dl{
    margin: 0.4em 0;
}

p {
    padding: 0;
    /* margin-bottom: .e; */
}

h1 {
    padding-bottom: .4rem;
    font-size: 2.2rem;
    line-height: 1.3;
}

h2 {
    font-size: 1.75rem;
    line-height: 1.225;
    margin: 35px 0 15px;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ddd;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.43;
    margin: 20px 0 7px;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
    color: #777;
}

a {
    color: #0099ff;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
    word-break: break-word;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #800080;
}

ul, ol {
    padding: 0;
    padding-left: 24px;
}

li {
    line-height: 24px;
}

li ul, li ol {
    margin-left: 16px;
}

p, ul, ol {
    font-size: 16px;
    line-height: 24px;
}

pre {
    display: block;
    overflow-y: hidden;
    overflow-x: auto;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

code {
    font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
    color: #e96900;
    padding: 0 4px;
    margin: 4px 0;
    border-radius: 2px;
    background-color: #f8f8f8;
    word-break: break-word;
}
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code {
    font-size: 0.9rem;
}

pre code {
    display: block;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: #34495e;
    background-color: #e0e0e0;
    line-height: 1.5;
    font-family: "YaHei Consolas Hybrid", Consolas, Monaco, "Andale Mono", Monospace, "Courier New";
    white-space: pre;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

aside {
    display: block;
    float: right;
    width: 390px;
}

blockquote {
    color: #666666;
    border-left: .5em solid #7a7a7a;
    padding: 0 1em;
    margin-left: 0;
}

blockquote p {
    color: #666666;
}

hr {
    display: block;
    text-align: left;
    margin: 1em 0;
    border: none;
    height: 1px;
    background-color: #cccccc;
}

table {
    padding: 0;
    width:100%;
    margin: 1rem 0;
    border-collapse: collapse;
 }
 
 table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0;
 }
 
 table tr:nth-child(2n){
     background-color: #f8f8f8;
 }
 table tr th {
    font-weight: bold;
    border: 1px solid #cccccc;
    background-color: #f2f2f2;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
 }
 
 table tr td {
    border: 1px solid #cccccc;
    margin: 0;
    padding: 6px 13px;
 }
 
 table tr th :first-child, table tr td :first-child {
    margin-top: 0;
 }
 
 table tr th :last-child, table tr td :last-child {
    margin-bottom: 0;
 }
 

div.vx-mermaid-graph {
    margin: 16px 0px 16px 0px;
    overflow-y: hidden;
}

div.vx-flowchartjs-graph {
    padding: 0px 5px 0px 5px;
    margin: 16px 0px 16px 0px;
    width: fit-content;
    overflow: hidden;
}

div.vx-wavedrom-graph {
    padding: 0px 5px 0px 5px;
    margin: 16px 0px 16px 0px;
    width: fit-content;
    overflow: hidden;
}

div.vx-plantuml-graph {
    padding: 5px 5px 0px 5px;
    margin: 16px 0px 16px 0px;
    width: fit-content;
    overflow: hidden;
}

::selection {
  background-color: #1976d2;
  color: #ffffff;
}

::-webkit-scrollbar {
    background-color: #f5f5f5;
    width: 14px;
    height: 14px;
    border: none;
}

::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

::-webkit-scrollbar-button {
    /* This selector affects the styling of both the up & down and left & right buttons of a scrollbar */
    height: 14px;
    width: 14px;
    background-color: #f5f5f5;
}

::-webkit-scrollbar-button:hover {
    background-color: #dadada;
}

::-webkit-scrollbar-button:active {
    background-color: #c0c0c0;
}

::-webkit-scrollbar-track {
    /* This selector affects the styling of the area in the scrollbar between the two buttons */
    background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    /* This selector affects the styling of draggable element of the scollbar */
    border: none;
    background-color: #cdcdcd;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #c0c0c0;
}

::-webkit-scrollbar-thumb:active {
    background-color: #bbbbbb;
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(right.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(left.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url(down.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(up.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

#vx-content span.vx-search-match {
    color: #222222;
    background-color: #4db6ac;
}

#vx-content span.vx-current-search-match {
    color: #222222;
    background-color: #66bb6a;
}

#vx-content {
    margin: 0 auto;
    padding: 30px 30px 40px;
}

/* 宽度设定 */
@media screen and (min-width: 1180px) {
    #vx-content {
        max-width: 1100px;
    }
}

@media screen and (max-width: 768px) {
    #vx-content {
        max-width: 100%;
        padding: 30px 15px 40px;
    }
}

.vx-alert{
    background-color: #F8F8F8 !important;
    padding: 12px 24px 12px 30px !important;
    border-radius:0 !important;
    margin: 2em 0;
    border:none !important;
    border-left: 4px solid #498BA7 !important;
    color: inherit !important;
}
.vx-alert::before
{
    background-color: #498BA7;
    border-radius: 100%;
    color: #fff;
    content: '!';
    font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    left: -12px;
    line-height: 20px;
    position: absolute;
    height: 20px;
    width: 20px;
    text-align: center;
    top: 14px;
}

.vx-alert p {
    margin: .4em 0;
}

.alert-success,.alert-s{
    border-color: #42B983 !important;
}
.alert-success::before,.alert-s::before{
    background-color: #42B983;
}

.alert-warning,.alert-w{
    border-color: #ffa502 !important;
}
.alert-warning:before,.alert-w::before{
    background-color: #ffa502;
}


.alert-info,.alert-i{
    border-color: #70a1ff !important;
}
.alert-info:before,.alert-i::before{
    background-color: #70a1ff;
}

.alert-danger,.alert-d{
    border-color: #ff4757 !important;
}
.alert-danger:before,.alert-d::before{
    background-color: #ff4757;
}

.alert-light{
    border-color: #C1C1C1 !important;
}

.alert-light:before{
    background-color: #C1C1C1;
}


.alert-dark{
    border-color: #484848 !important;
}

.alert-dark:before{
    background-color: #484848;
}

/* 标题层级展示 CSS */
.vx-header-anchor::after{background-color: #eee;padding: 0 5px;border-radius: 3px;}
.vx-header-anchor{color: #999;display: inline-block;margin-left: 10px;}

h1 .vx-header-anchor::after { content: 'H1';}
h2 .vx-header-anchor::after { content: 'H2';}
h3 .vx-header-anchor::after { content: 'H3';}
h4 .vx-header-anchor::after { content: 'H4';}
h5 .vx-header-anchor::after { content: 'H5';}
h6 .vx-header-anchor::after { content: 'H6';}


h1 .vx-header-anchor{margin-top: -5px;}
h2 .vx-header-anchor{margin-top: -4px;}
h3 .vx-header-anchor{margin-top: -3px;}
h4 .vx-header-anchor{margin-top: -2px;}
h5 .vx-header-anchor{margin-top: -1px;}

/* 优化嵌套代码块样式 */
.vx-alert .code-toolbar pre[class*="language-"]{
    background-color: #f3f3f3 !important;
    border: 1px dashed #eee;
}

text-editor.theme

File text-editor.theme

{
    "metadata" : {
        "revision" : 0,
        "name" : "Moonlight",
        "type" : "vtextedit"
    },
    "editor-styles" : {
        "Text" : {
            "//comment" : "Support a list of fonts separated by ,",
            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New",
            "font-size" : 12,
            "text-color" : "#222222",
            "background-color" : "#FFFFFF",
            "selected-text-color" : "#ffffff",
            "selected-background-color" : "#1976d2"
        },
        "CursorLine" : {
            "background-color" : "#D2E2FF"
        },
        "TrailingSpace" : {
            "background-color" : "#a8a8a8"
        },
        "Tab" : {
            "background-color" : "#cfcfcf"
        },
        "SelectedText" : {
            "//comment" : "Selected text highlight",
            "text-color" : "#222222",
            "background-color" : "#dfdf00"
        },
        "IndicatorsBorder" : {
            "text-color" : "#aaaaaa",
            "background-color" : "#fafafa"
        },
        "CurrentLineNumber" : {
            "text-color" : "#222222"
        },
        "Folding" : {
            "text-color" : "#6495ed"
        },
        "FoldedFolding" : {
            "text-color" : "#4169e1"
        },
        "FoldingHighlight" : {
            "text-color" : "#a9c4f5"
        },
        "FoldedFoldingRangeLine" : {
            "background-color" : "#befbdd"
        },
        "IncrementalSearch" : {
            "//comment" : "Incremental search highlight",
            "text-color" : "#222222",
            "background-color" : "#ce93d8"
        },
        "Search" : {
            "//comment" : "Search highlight",
            "text-color" : "#222222",
            "background-color" : "#4db6ac"
        },
        "SearchUnderCursor" : {
            "//comment" : "Search highlight under cursor",
            "text-color" : "#222222",
            "background-color" : "#66bb6a"
        }
    },
    "//comment" : "Override the Text style in editor-styles",
    "markdown-editor-styles" : {
        "Text" : {
            "//comment" : "Support a list of fonts separated by ,",
            "font-family" : "YaHei Consolas Hybrid, 冬青黑体, Microsoft YaHei, 微软雅黑, Microsoft YaHei UI, WenQuanYi Micro Hei, 文泉驿雅黑, Dengxian, 等线体, STXihei, 华文细黑, Liberation Sans, Droid Sans, NSimSun, 新宋体, SimSun, 宋体, Verdana, Helvetica, Tahoma, Arial, Geneva, Georgia, Times New Roman",
            "font-size" : 12,
            "text-color" : "#222222",
            "background-color" : "#fefefe",
            "selected-text-color" : "#ffffff",
            "selected-background-color" : "#1976d2"
        }
    },
    "markdown-syntax-styles" : {
        "H1" : {
            "text-color" : "#222222",
            "bold" : true,
            "font-size" : 15
        },
        "H2" : {
            "text-color" : "#222222",
            "bold" : true,
            "font-size" : 14
        },
        "H3" : {
            "text-color" : "#222222",
            "bold" : true,
            "font-size" : 13
        },
        "H4" : {
            "text-color" : "#222222",
            "bold" : true,
            "font-size" : 12
        },
        "H5" : {
            "text-color" : "#222222",
            "bold" : true,
            "font-size" : 11
        },
        "H6" : {
            "text-color" : "#222222",
            "bold" : true,
            "font-size" : 10
        },
        "HRULE" : {
            "text-color" : "#222222",
            "background-color" : "#dac7c9"
        },
        "LIST_BULLET" : {
            "text-color" : "#d33682",
            "bold" : true
        },
        "LIST_ENUMERATOR" : {
            "text-color" : "#0000ff"
        },
        "LINK" : {
            "text-color" : "#005fff"
        },
        "AUTO_LINK_URL" : {
            "text-color" : "#005fff"
        },
        "AUTO_LINK_EMAIL" : {
            "text-color" : "#005fff"
        },
        "IMAGE" : {
            "text-color" : "#616161"
        },
        "REFERENCE" : {
            "text-color" : "#826200"
        },
        "CODE" : {
            "text-color" : "#8e24aa",
            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
        },
        "EMPH" : {
            "italic" : true
        },
        "STRONG" : {
            "bold" : true
        },
        "HTML_ENTITY" : {
            "text-color" : "#8900b5"
        },
        "HTML" : {
            "text-color" : "#8900b5"
        },
        "HTMLBLOCK" : {
            "text-color" : "#8900b5"
        },
        "COMMENT" : {
            "text-color" : "#93a1a1"
        },
        "VERBATIM" : {
            "text-color" : "#673ab7",
            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
        },
        "//comment" : "Please modify the syntax highlight theme as well if you change this",
        "FENCEDCODEBLOCK" : {
            "text-color" : "#673ab7",
            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
        },
        "BLOCKQUOTE" : {
            "text-color" : "#00af00"
        },
        "NOTE" : {
            "text-color" : "#0087b5"
        },
        "STRIKE" : {
            "text-color" : "#b71c1c",
            "strike-through" : true
        },
        "FRONTMATTER" : {
            "text-color" : "#6c6c6c"
        },
        "INLINEEQUATION" : {
            "text-color" : "#00897b",
            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
        },
        "DISPLAYFORMULA" : {
            "text-color" : "#00897b",
            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
        },
        "MARK" : {
            "text-color" : "#222222",
            "background-color" : "#ffff76"
        },
        "TABLE" : {
            "font-family" : "YaHei Consolas Hybrid, Consolas, Monaco, Andale Mono, Monospace, Courier New"
        },
        "TABLEBORDER" : {
            "text-color" : "#d33682",
            "background-color" : "#e0e0e0"
        }
   }
}

The text was updated successfully, but these errors were encountered:

tamlok · 2024-03-05T07:01:35Z

The lastet one has typo?

jhon65496 · 2024-03-05T14:31:18Z

@tamlok

The lastet one has typo?

I have fixed the error.
Restarted the application.
The problem remains.

Is everything displayed the same in editing mode and viewing mode?

Background information.

tamlok · 2024-03-06T14:35:41Z

Edit mode and read mode uses different style files. One is the editor theme file, the other is the web.css file.

text-editor.theme You need to add "Italic: true" to it if you want an italic heading.

jhon65496 · 2024-03-13T06:21:30Z

@tamlok See Update-1 in the question

tamlok · 2024-03-14T06:14:49Z

Press F12 in read mode to check where does the italic style comes from.

jhon65496 · 2024-03-14T14:37:15Z

Press F12 in read mode to check where does the italic style comes from.

Sorry. I don't understand.
Could you describe in more detail how to solve the problem.

<h1 id="heading1" class="source-line" data-source-line="0">Heading1
 <a class="vx-header-anchor" href="#heading1" vx-data-anchor-icon="¶">
 </a>
</h1>

tamlok · 2024-03-15T09:34:47Z

Look at the right side panel to check where does the italic comes from.

Or try to delete the "font-weight: bold".

jhon65496 · 2024-03-15T18:48:23Z

@tamlok

Look at the right side panel to check where does the italic comes from.

Or try to delete the "font-weight: bold".

Am I doing the right thing?
Maybe the problem is in one of the fonts font-family:?

"font-weight: bold" - this did not lead to a result.

Pic-1
I don't find Italic.
Am I doing the right thing?

Pic-2
I checked the search for Times New Roman.
font-family:
The search is working.

font-family: 
	"YaHei Consolas Hybrid", 
	"Noto Sans", 
	"Helvetica Neue", 
	"Segoe UI", 
	Helvetica, 
	Tahoma, 
	Arial, 
	Geneva, 
	Georgia, 
	Palatino, 
	"Times New Roman", 
	冬青黑体, 
	"Microsoft YaHei", 
	微软雅黑, 
	"Microsoft YaHei UI", 
	"WenQuanYi Micro Hei", 
	文泉驿雅黑, 
	Dengxian, 
	等线体, 
	STXihei, 
	华文细黑, 
	"Liberation Sans", 
	"Droid Sans", 
	NSimSun, 
	新宋体, 
	SimSun, 
	宋体, 
	"Apple Color Emoji", 
	"Segoe UI Emoji";

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to make the text appear the same in edit mode and in View mode? #2485

How to make the text appear the same in edit mode and in View mode? #2485

jhon65496 commented Mar 4, 2024 •

edited

tamlok commented Mar 5, 2024

jhon65496 commented Mar 5, 2024 •

edited

tamlok commented Mar 6, 2024

jhon65496 commented Mar 13, 2024

tamlok commented Mar 14, 2024

jhon65496 commented Mar 14, 2024

tamlok commented Mar 15, 2024

jhon65496 commented Mar 15, 2024 •

edited

How to make the text appear the same in edit mode and in View mode? #2485

How to make the text appear the same in edit mode and in View mode? #2485

Comments

jhon65496 commented Mar 4, 2024 • edited

Update-1

web.css

text-editor.theme

tamlok commented Mar 5, 2024

jhon65496 commented Mar 5, 2024 • edited

tamlok commented Mar 6, 2024

jhon65496 commented Mar 13, 2024

tamlok commented Mar 14, 2024

jhon65496 commented Mar 14, 2024

tamlok commented Mar 15, 2024

jhon65496 commented Mar 15, 2024 • edited

jhon65496 commented Mar 4, 2024 •

edited

jhon65496 commented Mar 5, 2024 •

edited

jhon65496 commented Mar 15, 2024 •

edited