Skip to content

Commit 84ebaa6

Browse files
NSHenryNSHenry
authored
feature/1.0.1 (#46)
* Titles for code blocks. Transformed code into a block style similar to panels that allows for title usage. * Corrected missing curly brace * Further attempt at fixing code blocks * Working code blocks with line breaks. * Updated comments and cleaned disabled code. * updated variable naming for clarity * bullets with caveats * A much more elegant solution that pays attention to code blocks. * Added preset confluence styles. * Brought back original code block. * Update package.json * Fixed simple code block issue. * refactor and simplify logic * updating actions/checkout version * updating actions/setup-node version * Updated tests and modified parser for clarity. * Refactoring and test updates. * Variable rename * Clean CSS & update some comments * Update CHANGELOG.md * Enabling whitespace preservation in code blocks. * Update CHANGELOG.md * CSS Adjustments * Excluded code blocks from hyphen replacement.
1 parent da6ec71 commit 84ebaa6

File tree

9 files changed

+169
-64
lines changed

9 files changed

+169
-64
lines changed

‎.github/workflows/cd.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ jobs:
2020
runs-on: ubuntu-latest
2121
steps:
2222
- name: Checkout
23-
uses: actions/checkout@v2
23+
uses: actions/checkout@v3
2424
- name: Install Node.js
25-
uses: actions/setup-node@v1
25+
uses: actions/setup-node@v3
2626
with:
2727
node-version: 14.x
2828
- name: Install Dependencies

‎.github/workflows/ci.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ jobs:
1717
runs-on: ${{ matrix.os }}
1818
steps:
1919
- name: Checkout
20-
uses: actions/checkout@v2
20+
uses: actions/checkout@v3
2121
- name: Install Node.js
22-
uses: actions/setup-node@v1
22+
uses: actions/setup-node@v3
2323
with:
2424
node-version: 14.x
2525
- name: Install Dependencies

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Confluence Wiki Markup
22

3+
## [1.0.1]
4+
5+
- modified code/noformat blocks so they can be used in lists to match confluence behaviour
6+
- added support for code block macro titles and themes (only standard themes are supported, and there's no syntax highlighting)
7+
- changed `white-space: normal` to `white-space: pre-wrap` for `pre > code` CSS to match confluence behaviour and commonmark spec (white space is preserved)
8+
- changed test files to accomodate above changes
9+
- updated github workflow actions to v3
10+
311
## [1.0.0](https://github.com/denco/vscode-confluence-markup/releases/tag/1.0.0)
412

513
- non preview release [1.0.0](https://github.com/denco/vscode-confluence-markup/issues/37)

‎media/css/confluence.css‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,37 @@ table, th, td {
4848
padding: 7px;
4949
}
5050

51+
.code-block {
52+
display: block;
53+
width: 90%;
54+
border-width: 1px;
55+
}
56+
57+
.code-title {
58+
display: block;
59+
background:#c6c3c3;
60+
color: black;
61+
font-weight: bold;
62+
border-bottom-color: #ccc;
63+
padding: 5px 10px;
64+
overflow: hidden;
65+
position: relative;
66+
}
67+
68+
pre {
69+
margin: 0px;
70+
}
71+
5172
pre > code {
5273
display: block;
5374
background:rgba(0, 0, 0, 0.15);
5475
word-wrap: break-word;
5576
overflow-wrap: break-word;
5677
word-break: break-space;
57-
white-space: normal;
58-
margin: 0px 5px;
78+
/* Confluence allows for indentations and whitespace preservation in code blocks */
79+
/* white-space: normal; */
80+
white-space: pre-wrap;
81+
margin: 0px;
5982
padding: 5px 1em;
6083
line-height: 1.5em;
6184
}
@@ -84,7 +107,7 @@ pre > code {
84107

85108

86109
pre > code > p {
87-
margin: 0px;
110+
margin: .5em 0;
88111
}
89112

90113
ul {

‎npm-shrinkwrap.json‎

Lines changed: 3 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "confluence-markup",
33
"displayName": "Confluence markup",
4-
"version": "1.0.0",
4+
"version": "1.0.1",
55
"publisher": "denco",
66
"description": "Confluence markup language support for Visual Studio Code",
77
"keywords": [

‎src/markupParser.ts‎

Lines changed: 74 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -157,22 +157,73 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
157157
}
158158

159159
// code
160-
// online code tag
160+
// oneline code and noformat tag
161161
tag = tag.replace(/\{(noformat|code)[^}]*\}(.*)\{(noformat|code)\}/, function (m0, m1, m2) {
162162
return `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>${m2.replace(/</gi, '&lt;')}</code></pre>`;
163163
});
164164

165-
const code_re = /\{(noformat|code)[^}]*\}/;
165+
166+
// code and noformat tag
167+
const code_re = /\{(noformat|code)([^}]*)\}/;
166168
const code_match = tag.match(code_re);
167169
if (code_match) {
168170
if (! codeTagFlag) {
169-
tag = `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>`;
171+
let codeBlockStyle = "";
172+
// Title style is unecessary for now. It can't be easily customized in Confluence.
173+
// let titleStyle = "";
174+
tag = tag.replace(code_re, function (m0, m1, m2) {
175+
// let res = '<pre><code $codeBlockStyle>'
176+
let res = `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}$codeBlockStyle'>`;
177+
const splits = m2.split(/[|:]/);
178+
splits.forEach( (el:string) => {
179+
const elems = el.split('=');
180+
if (elems[0] === "title"){
181+
res = `<span class="code-title">${elems[1]}</span>${res}`;
182+
// res = `<span class="code-title" $titleStyle>${elems[1]}</span>${res}`;
183+
}
184+
// Basic theme matching.
185+
if (elems[0] === "theme"){
186+
// Predefined confluence themes.
187+
switch (elems[1].toLowerCase()) {
188+
case "django":
189+
codeBlockStyle = `;color:#f8f8f8;background-color:#0a2b1d;`;
190+
break;
191+
case "emacs":
192+
codeBlockStyle = `;color:#d3d3d3;background-color:black;`;
193+
break;
194+
case "fadetogrey":
195+
codeBlockStyle = `;color:white;background-color:#121212;`;
196+
break;
197+
case "midnight":
198+
codeBlockStyle = `;color:#d1edff;background-color:#0f192a;`;
199+
break;
200+
case "rdark":
201+
codeBlockStyle = `;color:#b9bdb6;background-color:#1b2426;`;
202+
break;
203+
case "eclipse":
204+
case "confluence":
205+
codeBlockStyle = `;color:white;background-color:black;`;
206+
}
207+
}
208+
});
209+
res = `<div class="code-block">${res}`;
210+
res = res.replace('$codeBlockStyle', codeBlockStyle);
211+
// res = res.replace('$titleStyle', titleStyle);
212+
return res;
213+
});
170214
codeTagFlag = true;
171215
} else {
172-
tag = '</pre></code>';
216+
tag = '</pre></code></div>';
217+
//This pays attention to the list flag and adds the closing </li> tag if needed.
218+
if (listFlag) {
219+
tag = `${tag}</li>`;
220+
}
173221
codeTagFlag = false;
174222
}
175223
}
224+
if (codeTagFlag && ! code_match) {
225+
tag = tag.replace(/</gi, '&lt;') + '<br />';
226+
}
176227

177228
const panel_re = /\{panel(.*)}/;
178229
if (! codeTagFlag && tag.match(panel_re)) {
@@ -251,11 +302,14 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
251302
panelTagFlag = true;
252303
} else {
253304
tag = '</div>';
305+
if (listFlag) {
306+
tag = `${tag}</li>`;
307+
}
254308
panelTagFlag = false;
255309
}
256310
}
257311

258-
if (! codeTagFlag) {
312+
// if (! codeTagFlag) {
259313
// lists
260314
const li_re = /^([-*#]+)\s(.*)/;
261315
const li_match = tag.match(li_re);
@@ -285,7 +339,12 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
285339
tag = '</' + listArr.slice(li_match[1].length, listArr.length).reverse().join('></') + '>';
286340
listArr = listArr.slice(0, li_match[1].length);
287341
}
288-
tag += "<li>" + li_match[2] + "</li>";
342+
// This prevents the closing </li> tag from being added too prematurely.
343+
if (codeTagFlag || panelTagFlag) {
344+
tag += "<li>" + li_match[2];
345+
} else {
346+
tag += "<li>" + li_match[2] + "</li>";
347+
}
289348
}
290349

291350

@@ -296,10 +355,13 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
296355
listFlag = false;
297356
}
298357

358+
if (! codeTagFlag) {
299359
// hr and dash lines
300360
tag = tag.replace(/-{4,}/gi, '<hr />');
301361
tag = tag.replace(/-{3}/gi, '&mdash;');
302362
tag = tag.replace(/-{2}/gi, '&ndash;');
363+
}
364+
303365
// strong
304366
tag = tag.replace(/\*([^*]*)\*/g, "<strong>$1</strong>");
305367
// line-through
@@ -309,11 +371,12 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
309371
tag = tag.replace(/\B-((\([^)]*\)|{[^}]*}|\[[^]]+\]){0,3})(\S.*?\S|\S)-\B/g," <span style='text-decoration: line-through;'>$3</span> ");
310372
tag = tag.replace(/(?:\b)_((\([^)]*\)|{[^}]*}|\[[^]]+\]){0,3})(\S.*?\S|\S)_(?:\b)/g, "<i>$3</i>");
311373
}
312-
} else {
313-
if (tag !== `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>`) {
314-
tag = tag.replace(/</gi, '&lt;') + '<br />';
315-
}
316-
}
374+
// This only really applied to the inner part of code blocks and noformat blocks, so I moved it there and used a flag to trigger it.
375+
// } else {
376+
// if (tag !== `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>`) {
377+
// tag = tag.replace(/</gi, '&lt;') + '<br />';
378+
// }
379+
// }
317380

318381
//close table
319382
if (!tag.match(/<\/tr>$/) && tableFlag) {

‎src/test/suite/fixtures/expected/issues.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@ <h1>
66
<p>
77
<a href='https://github.com/denco/vscode-confluence-markup/issues/3'>#3</a>: Noformat macro</p>
88
<p>
9-
<pre>
10-
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
11-
<p>$ date -R -v+1d
12-
<br />
13-
</p>
14-
<p>Sat, 10 Feb 2018 10:37:39 +0100
15-
<br />
16-
</p>
17-
<p></pre>
18-
</code>
9+
<div class="code-block">
10+
<pre>
11+
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
12+
<p>$ date -R -v+1d
13+
<br />
14+
</p>
15+
<p>Sat, 10 Feb 2018 10:37:39 +0100
16+
<br />
17+
</p>
18+
<p></pre>
19+
</code>
20+
</div>
1921
</p>
2022
<p>
2123
<a href='https://github.com/denco/vscode-confluence-markup/issues/5'>#5</a>: Table without heading</p>

‎src/test/suite/fixtures/expected/test.html‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -258,31 +258,37 @@ <h2>
258258
</h2>
259259
</p>
260260
<p>
261-
<pre>
262-
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
263-
<p>&lt;test>
264-
<br />
265-
</p>
266-
<p>&lt;test1 />
267-
<br />
268-
</p>
269-
<p>&lt;/test>
270-
<br />
271-
</p>
272-
<p></pre>
273-
</code>
261+
<div class="code-block">
262+
<span class="code-title">test</span>
263+
<pre>
264+
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
265+
<p>&lt;test>
266+
<br />
267+
</p>
268+
<p>&lt;test1 />
269+
<br />
270+
</p>
271+
<p>&lt;/test>
272+
<br />
273+
</p>
274+
<p></pre>
275+
</code>
276+
</div>
274277
</p>
275278
<p>
276-
<pre>
277-
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
278-
<p>bash
279-
<br />
280-
</p>
281-
<p>echo very long command line with a lot of sings to check word wrap and how it looks like && echo much more elements to print
282-
<br />
283-
</p>
284-
<p></pre>
285-
</code>
279+
<div class="code-block">
280+
<span class="code-title">title</span>
281+
<pre>
282+
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
283+
<p>bash
284+
<br />
285+
</p>
286+
<p>echo very long command line with a lot of sings to check word wrap and how it looks like && echo much more elements to print
287+
<br />
288+
</p>
289+
<p></pre>
290+
</code>
291+
</div>
286292
</p>
287293
<p>
288294
<pre>
@@ -297,16 +303,18 @@ <h2>
297303
</h2>
298304
</p>
299305
<p>
300-
<pre>
301-
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
302-
<p>&lt;xml>
303-
<br />
304-
</p>
305-
<p>&lt;/xml>
306-
<br />
307-
</p>
308-
<p></pre>
309-
</code>
306+
<div class="code-block">
307+
<pre>
308+
<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
309+
<p>&lt;xml>
310+
<br />
311+
</p>
312+
<p>&lt;/xml>
313+
<br />
314+
</p>
315+
<p></pre>
316+
</code>
317+
</div>
310318
</p>
311319
<p>
312320
<pre>

0 commit comments

Comments
 (0)