feature/1.0.1

.github/workflows/cd.yml

@@ -20,9 +20,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Install Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: 14.x
       - name: Install Dependencies

.github/workflows/ci.yml

@@ -17,9 +17,9 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Install Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: 14.x
       - name: Install Dependencies

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Confluence Wiki Markup
 
+## [1.0.1]
+
+- modified code/noformat blocks so they can be used in lists to match confluence behaviour
+- added support for code block macro titles and themes (only standard themes are supported, and there's no syntax highlighting)
+- changed `white-space: normal` to `white-space: pre-wrap` for `pre > code` CSS to match confluence behaviour and commonmark spec (white space is preserved)
+- changed test files to accomodate above changes
+- updated github workflow actions to v3
+
 ## [1.0.0](https://github.com/denco/vscode-confluence-markup/releases/tag/1.0.0)
 
 - non preview release [1.0.0](https://github.com/denco/vscode-confluence-markup/issues/37)

media/css/confluence.css

@@ -48,14 +48,37 @@ table, th, td {
 	padding: 7px;
 }
 
+.code-block {
+	display: block;
+	width: 90%;
+	border-width: 1px;
+}
+
+.code-title {
+	display: block;
+	background:#c6c3c3;
+	color: black;
+	font-weight: bold;
+	border-bottom-color: #ccc;
+	padding: 5px 10px;
+	overflow: hidden;
+	position: relative;
+}
+
+pre {
+	margin: 0px;
+}
+
 pre > code {
 	display: block;
 	background:rgba(0, 0, 0, 0.15);
 	word-wrap: break-word;
 	overflow-wrap: break-word;
 	word-break: break-space;
-	white-space: normal;
-	margin: 0px 5px;
+	/* Confluence allows for indentations and whitespace preservation in code blocks */
+	/* white-space: normal; */
+	white-space: pre-wrap;
+	margin: 0px;
 	padding: 5px 1em;
 	line-height: 1.5em;
 }
@@ -84,7 +107,7 @@ pre > code {
 
 
 pre > code > p {
-	margin: 0px;
+	margin: .5em 0;
 }
 
 ul {

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "confluence-markup",
 	"displayName": "Confluence markup",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"publisher": "denco",
 	"description": "Confluence markup language support for Visual Studio Code",
 	"keywords": [

src/markupParser.ts

@@ -157,22 +157,73 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 		}
 
 		// code
-		// online code tag
+		// oneline code and noformat tag
 		tag = tag.replace(/\{(noformat|code)[^}]*\}(.*)\{(noformat|code)\}/, function (m0, m1, m2) {
 			return `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>${m2.replace(/</gi, '&lt;')}</code></pre>`;
 		});
 
-		const code_re = /\{(noformat|code)[^}]*\}/;
+
+		// code and noformat tag
+		const code_re = /\{(noformat|code)([^}]*)\}/;
 		const code_match = tag.match(code_re);
 		if (code_match) {
 			if (! codeTagFlag) {
-				tag = `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>`;
+				let codeBlockStyle = "";
+				// Title style is unecessary for now. It can't be easily customized in Confluence.
+				// let titleStyle = "";
+				tag = tag.replace(code_re, function (m0, m1, m2) {
+					// let res = '<pre><code $codeBlockStyle>'
+					let res = `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}$codeBlockStyle'>`;
+					const splits = m2.split(/[|:]/);
+					splits.forEach( (el:string) => {
+						const elems = el.split('=');
+						if (elems[0] === "title"){
+							res = `<span class="code-title">${elems[1]}</span>${res}`;
+							// res = `<span class="code-title" $titleStyle>${elems[1]}</span>${res}`;
+						}
+						// Basic theme matching.
+						if (elems[0] === "theme"){
+							// Predefined confluence themes.
+							switch (elems[1].toLowerCase()) {
+								case "django":
+									codeBlockStyle = `;color:#f8f8f8;background-color:#0a2b1d;`;
+									break;
+								case "emacs":
+									codeBlockStyle = `;color:#d3d3d3;background-color:black;`;
+									break;
+								case "fadetogrey":
+									codeBlockStyle = `;color:white;background-color:#121212;`;
+									break;
+								case "midnight":
+									codeBlockStyle = `;color:#d1edff;background-color:#0f192a;`;
+									break;
+								case "rdark":
+									codeBlockStyle = `;color:#b9bdb6;background-color:#1b2426;`;
+									break;
+								case "eclipse":
+								case "confluence":
+									codeBlockStyle = `;color:white;background-color:black;`;
+								}
+						}
+					});
+					res = `<div class="code-block">${res}`;
+					res = res.replace('$codeBlockStyle', codeBlockStyle);
+					// res = res.replace('$titleStyle', titleStyle);
+					return res;
+				});
 				codeTagFlag = true;
 			} else {
-				tag = '</pre></code>';
+				tag = '</pre></code></div>';
+				//This pays attention to the list flag and adds the closing </li> tag if needed.
+				if (listFlag) {
+					tag = `${tag}</li>`;
+				}
 				codeTagFlag = false;
 			}
 		}
+		if (codeTagFlag && ! code_match) {
+			tag = tag.replace(/</gi, '&lt;') + '<br />';
+		}
 
 		const panel_re = /\{panel(.*)}/;
 		if (! codeTagFlag && tag.match(panel_re)) {
@@ -251,11 +302,14 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 				panelTagFlag = true;
 			} else {
 				tag = '</div>';
+				if (listFlag) {
+					tag = `${tag}</li>`;
+				}
 				panelTagFlag = false;
 			}
 		}
 
-		if (! codeTagFlag) {
+		// if (! codeTagFlag) {
 			// lists
 			const li_re = /^([-*#]+)\s(.*)/;
 			const li_match = tag.match(li_re);
@@ -285,7 +339,12 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 					tag = '</' + listArr.slice(li_match[1].length, listArr.length).reverse().join('></') + '>';
 					listArr = listArr.slice(0, li_match[1].length);
 				}
-				tag += "<li>" + li_match[2] + "</li>";
+				// This prevents the closing </li> tag from being added too prematurely.
+				if (codeTagFlag || panelTagFlag) {
+					tag += "<li>" + li_match[2];
+				} else {
+					tag += "<li>" + li_match[2] + "</li>";
+				}
 			}
 
 
@@ -296,10 +355,13 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 				listFlag = false;
 			}
 
+			if (! codeTagFlag) {
 			// hr and dash lines
 			tag = tag.replace(/-{4,}/gi, '<hr />');
 			tag = tag.replace(/-{3}/gi, '&mdash;');
 			tag = tag.replace(/-{2}/gi, '&ndash;');
+			}
+
 			// strong
 			tag = tag.replace(/\*([^*]*)\*/g, "<strong>$1</strong>");
 			// line-through
@@ -309,11 +371,12 @@ export function parseMarkup(sourceUri: vscode.Uri, sourceText: string) {
 				tag = tag.replace(/\B-((\([^)]*\)|{[^}]*}|\[[^]]+\]){0,3})(\S.*?\S|\S)-\B/g," <span style='text-decoration: line-through;'>$3</span> ");
 				tag = tag.replace(/(?:\b)_((\([^)]*\)|{[^}]*}|\[[^]]+\]){0,3})(\S.*?\S|\S)_(?:\b)/g, "<i>$3</i>");
 			}
-		} else {
-			if (tag !== `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>`) {
-				tag = tag.replace(/</gi, '&lt;') + '<br />';
-			}
-		}
+		// 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.
+		// } else {
+		// 	if (tag !== `<pre><code style='font-family: ${MONOSPACE_FONT_FAMILY}'>`) {
+		// 		tag = tag.replace(/</gi, '&lt;') + '<br />';
+		// 	}
+		// }
 
 		//close table
 		if (!tag.match(/<\/tr>$/) && tableFlag) {

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

@@ -6,16 +6,18 @@ <h1>
 <p>
 	<a href='https://github.com/denco/vscode-confluence-markup/issues/3'>#3</a>: Noformat macro</p>
 <p>
-	<pre>
-		<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
-		<p>$ date -R -v+1d
-			<br />
-		</p>
-		<p>Sat, 10 Feb 2018 10:37:39 +0100
-			<br />
-		</p>
-		<p></pre>
-	</code>
+	<div class="code-block">
+		<pre>
+			<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
+			<p>$ date -R -v+1d
+				<br />
+			</p>
+			<p>Sat, 10 Feb 2018 10:37:39 +0100
+				<br />
+			</p>
+			<p></pre>
+		</code>
+	</div>
 </p>
 <p>
 	<a href='https://github.com/denco/vscode-confluence-markup/issues/5'>#5</a>: Table without heading</p>

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

@@ -258,31 +258,37 @@ <h2>
 	</h2>
 </p>
 <p>
-	<pre>
-		<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
-		<p>&lt;test>
-			<br />
-		</p>
-		<p>&lt;test1 />
-			<br />
-		</p>
-		<p>&lt;/test>
-			<br />
-		</p>
-		<p></pre>
-	</code>
+	<div class="code-block">
+		<span class="code-title">test</span>
+		<pre>
+			<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
+			<p>&lt;test>
+				<br />
+			</p>
+			<p>&lt;test1 />
+				<br />
+			</p>
+			<p>&lt;/test>
+				<br />
+			</p>
+			<p></pre>
+		</code>
+	</div>
 </p>
 <p>
-	<pre>
-		<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
-		<p>bash
-			<br />
-		</p>
-		<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
-			<br />
-		</p>
-		<p></pre>
-	</code>
+	<div class="code-block">
+		<span class="code-title">title</span>
+		<pre>
+			<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
+			<p>bash
+				<br />
+			</p>
+			<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
+				<br />
+			</p>
+			<p></pre>
+		</code>
+	</div>
 </p>
 <p>
 	<pre>
@@ -297,16 +303,18 @@ <h2>
 	</h2>
 </p>
 <p>
-	<pre>
-		<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
-		<p>&lt;xml>
-			<br />
-		</p>
-		<p>&lt;/xml>
-			<br />
-		</p>
-		<p></pre>
-	</code>
+	<div class="code-block">
+		<pre>
+			<code style='font-family: Menlo, Monaco, Consolas, monospace'></p>
+			<p>&lt;xml>
+				<br />
+			</p>
+			<p>&lt;/xml>
+				<br />
+			</p>
+			<p></pre>
+		</code>
+	</div>
 </p>
 <p>
 	<pre>