|
1 | 1 | <template> |
2 | | - <eslint-editor |
3 | | - :linter="linter" |
4 | | - :config="config" |
5 | | - :code="code" |
6 | | - :style="{ height }" |
7 | | - class="eslint-code-block" |
8 | | - filename="example.vue" |
9 | | - language="html" |
10 | | - :preprocess="preprocess" |
11 | | - :postprocess="postprocess" |
12 | | - dark |
13 | | - :format="format" |
14 | | - :fix="fix" |
15 | | - /> |
| 2 | + <div class="eslint-code-container"> |
| 3 | + <eslint-editor |
| 4 | + :linter="linter" |
| 5 | + :config="config" |
| 6 | + :code="code" |
| 7 | + :style="{ height }" |
| 8 | + class="eslint-code-block" |
| 9 | + filename="example.vue" |
| 10 | + language="html" |
| 11 | + :preprocess="preprocess" |
| 12 | + :postprocess="postprocess" |
| 13 | + dark |
| 14 | + :format="format" |
| 15 | + :fix="fix" |
| 16 | + /> |
| 17 | + </div> |
16 | 18 | </template> |
17 | 19 |
|
18 | 20 | <script> |
@@ -92,7 +94,7 @@ export default { |
92 | 94 | |
93 | 95 | height () { |
94 | 96 | const lines = this.code.split('\n').length |
95 | | - return `${Math.max(120, 20 * (1+lines))}px` |
| 97 | + return `${Math.max(120, 19 * lines)}px` |
96 | 98 | } |
97 | 99 | }, |
98 | 100 | |
@@ -129,8 +131,18 @@ export default { |
129 | 131 | </script> |
130 | 132 |
|
131 | 133 | <style> |
| 134 | +.eslint-code-container { |
| 135 | + border-radius: 6px; |
| 136 | + padding: 1.25rem 0; |
| 137 | + margin: 1em 0; |
| 138 | + background-color: #1e1e1e; |
| 139 | +} |
| 140 | + |
132 | 141 | .eslint-code-block { |
133 | 142 | width: 100%; |
134 | | - margin: 1em 0; |
| 143 | +} |
| 144 | + |
| 145 | +.eslint-editor-actions { |
| 146 | + bottom: -0.9rem; |
135 | 147 | } |
136 | 148 | </style> |
0 commit comments