Discuz 手动添加 markdown 代码支持教程！

73327424

排版乱了，修改一下



实现过程

1、在/home/www/template/你的模板/common/header.htm中加入下面的代码

1. <script src="https://cdn.bootcdn.net/ajax/libs/marked/2.1.3/marked.min.js"></script>

复制代码

2、在/home/www/template/你的模板/common/footer.htm中加入下面的代码

1. <script>
   
2.         window.onload = function() {
   
3.                 var markdown_tags = document.getElementsByTagName("markdown");
   
4.                 for (var i = 0; i < markdown_tags.length; i++) {
   
5.                         markdown_tags.innerHTML = '<div class="custom-markdown">' + marked(markdown_tags.textContent) + "</div>";
   
6.                 }
   
7.         }
   
8. </script>

复制代码

3、在discuz后台配置-界面－编辑器设置－Discuz代码添加一项markdown，找个图标设置上去，可用和显示按钮勾上，详情配置如下

标签：markdown

替换内容：<markdown>{1}</markdown>

解释：markdown代码

参数个数：1

参数提示语：markdown

嵌套次数：1

允许的用户组：全选

4、将下面的css代码保存成一个markdown.min.css文件，放到/template/default/common/目录下

1. .parsedown-markdown {
   
2.         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   
3.         line-height: 1.5
   
4. }
   
5. 
   
6. .parsedown-markdown h1,
   
7. .parsedown-markdown h2,
   
8. .parsedown-markdown h3,
   
9. .parsedown-markdown h4,
   
10. .parsedown-markdown h5,
    
11. .parsedown-markdown h6 {
    
12.         margin-bottom: 16px;
    
13.         font-weight: 600;
    
14.         line-height: 1.25
    
15. }
    
16. 
    
17. .parsedown-markdown h1,
    
18. .parsedown-markdown h2 {
    
19.         padding-bottom: .3em;
    
20.         border-bottom: 1px solid #eaecef
    
21. }
    
22. 
    
23. .parsedown-markdown h1 {
    
24.         font-size: 2em
    
25. }
    
26. 
    
27. .parsedown-markdown h2 {
    
28.         font-size: 1.5em
    
29. }
    
30. 
    
31. .parsedown-markdown h3 {
    
32.         font-size: 1.25em
    
33. }
    
34. 
    
35. .parsedown-markdown h4 {
    
36.         font-size: 1em
    
37. }
    
38. 
    
39. .parsedown-markdown h5 {
    
40.         font-size: .875em
    
41. }
    
42. 
    
43. .parsedown-markdown h6 {
    
44.         color: #6a737d;
    
45.         font-size: .85em
    
46. }
    
47. 
    
48. .parsedown-markdown em {
    
49.         font-style: italic
    
50. }
    
51. 
    
52. .parsedown-markdown hr {
    
53.         height: .2em;
    
54.         padding: 0;
    
55.         margin: 24px 0;
    
56.         border: 0;
    
57.         background-color: #e1e4e8
    
58. }
    
59. 
    
60. .parsedown-markdown p,
    
61. .parsedown-markdown blockquote,
    
62. .parsedown-markdown table,
    
63. .parsedown-markdown ol,
    
64. .parsedown-markdown ul,
    
65. .parsedown-markdown dl,
    
66. .parsedown-markdown pre {
    
67.         margin-top: 0;
    
68.         margin-bottom: 15px
    
69. }
    
70. 
    
71. .parsedown-markdown li {
    
72.         margin-left: 2px
    
73. }
    
74. 
    
75. .parsedown-markdown ul>li {
    
76.         list-style-type: disc
    
77. }
    
78. 
    
79. .parsedown-markdown ol>li {
    
80.         list-style-type: decimal
    
81. }
    
82. 
    
83. .parsedown-markdown pre {
    
84.         background-color: #f6f8fa;
    
85.         border-radius: 6px;
    
86.         overflow: auto;
    
87.         padding: 4px;
    
88.         font-size: 85%;
    
89.         line-height: 1.45;
    
90.         border: none !important
    
91. }
    
92. 
    
93. .parsedown-markdown p>code,
    
94. .parsedown-markdown li>code {
    
95.         font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    
96.         padding: .2em .4em;
    
97.         margin: 0;
    
98.         font-size: 85%;
    
99.         background-color: rgba(27, 31, 35, .05);
    
100.         border-radius: 6px
     
101. }
     
102. 
     
103. .parsedown-markdown pre>code {
     
104.         font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace
     
105. }
     
106. 
     
107. .parsedown-markdown a {
     
108.         color: #0645ad;
     
109.         text-decoration: none
     
110. }
     
111. 
     
112. .parsedown-markdown a:visited {
     
113.         color: #0b0080
     
114. }
     
115. 
     
116. .parsedown-markdown a:hover {
     
117.         color: #06e
     
118. }
     
119. 
     
120. .parsedown-markdown a:active {
     
121.         color: #faa700
     
122. }
     
123. 
     
124. .parsedown-markdown a:focus {
     
125.         outline: thin dotted
     
126. }
     
127. 
     
128. .parsedown-markdown a:hover,
     
129. a:active {
     
130.         outline: 0
     
131. }
     
132. 
     
133. .parsedown-markdown ::-moz-selection {
     
134.         background: rgba(255, 255, 0, 0.3);
     
135.         color: #000
     
136. }
     
137. 
     
138. .parsedown-markdown ::selection {
     
139.         background: rgba(255, 255, 0, 0.3);
     
140.         color: #000
     
141. }
     
142. 
     
143. .parsedown-markdown a::-moz-selection {
     
144.         background: rgba(255, 255, 0, 0.3);
     
145.         color: #0645ad
     
146. }
     
147. 
     
148. .parsedown-markdown a::selection {
     
149.         background: rgba(255, 255, 0, 0.3);
     
150.         color: #0645ad
     
151. }
     
152. 
     
153. .parsedown-markdown blockquote {
     
154.         color: #6a737d;
     
155.         padding: 0 1em;
     
156.         margin: 0;
     
157.         border-left: .25em #dfe2e5 solid
     
158. }
     
159. 
     
160. .parsedown-markdown ul,
     
161. .parsedown-markdown ol {
     
162.         padding-left: 2em;
     
163.         margin-left: 0
     
164. }
     
165. 
     
166. .parsedown-markdown li p:last-child {
     
167.         margin: 0
     
168. }
     
169. 
     
170. .parsedown-markdown dd {
     
171.         margin: 0 0 0 2em
     
172. }
     
173. 
     
174. .parsedown-markdown img {
     
175.         border: 0;
     
176.         -ms-interpolation-mode: bicubic;
     
177.         vertical-align: middle;
     
178.         max-width: 100%
     
179. }
     
180. 
     
181. .parsedown-markdown table {
     
182.         margin: .25em auto;
     
183.         width: 98%;
     
184.         table-layout: auto;
     
185.         overflow: auto;
     
186.         border-spacing: 0;
     
187.         border-collapse: collapse
     
188. }
     
189. 
     
190. .parsedown-markdown table thead {
     
191.         background-color: #d9e2df
     
192. }
     
193. 
     
194. .parsedown-markdown table tr:nth-child(2n) {
     
195.         background-color: #f6f8fa
     
196. }
     
197. 
     
198. .parsedown-markdown table tr {
     
199.         border-top: 1px solid #c6cbd1
     
200. }
     
201. 
     
202. .parsedown-markdown table th {
     
203.         font-weight: 600
     
204. }
     
205. 
     
206. .parsedown-markdown table td,
     
207. .parsedown-markdown table th {
     
208.         padding: 6px 13px;
     
209.         border: 1px solid #c6cbd1
     
210. }

复制代码

5、在/home/www/template/你的模板/forum/viewthread.htm中的<!--{hook/viewthread_top}-->上面加入下面的代码

1. <link rel="stylesheet" href="./template/default/common/markdown.min.css">

复制代码

73327424

这个已经不能用了