Skip to content

Commit

Permalink
Revert "Add language indicator to code blocks (#957)" (#964)
Browse files Browse the repository at this point in the history
The language indicator may display the "incorrect" language, because we
sometimes use other language for syntax highlighting when the original
language isn't available (e.g. using "html" for MarkBind codes).

The language indicator also covers the first line of the source code if
it becomes too long.

Finally, this design may not be sustainable in the long run if we were
to add more features to code blocks (e.g. copy button).

This reverts commit c854937.
  • Loading branch information
yamgent authored Dec 31, 2019
1 parent a45966b commit 2ebee63
Show file tree
Hide file tree
Showing 10 changed files with 7 additions and 188 deletions.
20 changes: 0 additions & 20 deletions asset/css/markbind.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,6 @@ pre > code.hljs {
border-radius: 5px;
}

.code-block {
position: relative;
}

.code-block > .code-block-lang {
background-color: #b4b4b9;
border-radius: 0.25rem;
color: #f8f8ff;
display: inline-block;
font-size: 75%;
line-height: 1;
padding: 0.25em 0.4em;
position: absolute;
right: 0.3em;
text-align: center;
top: 0.4em;
vertical-align: baseline;
white-space: nowrap;
}

kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
Expand Down
2 changes: 1 addition & 1 deletion docs/userGuide/syntax/code.mbdf
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Code

MarkBind can provide syntax coloring for a code block (aka _Fenced Code Blocks_). The language of the code block is labelled as well.
MarkBind can provide syntax coloring for a code block (aka _Fenced Code Blocks_).
<span id="main-example">
<include src="outputBox.md" boilerplate >
<span id="code">
Expand Down
63 changes: 4 additions & 59 deletions src/lib/markbind/src/lib/markdown-it/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ const slugify = require('@sindresorhus/slugify');
// markdown-it plugins
markdownIt.use(require('markdown-it-mark'))
.use(require('markdown-it-ins'))
.use(require('markdown-it-anchor'), { slugify: (str) => slugify(str, { decamelize: false }) })
.use(require('markdown-it-imsize'), { autofill: false })
.use(require('markdown-it-anchor'), {slugify: (str) => slugify(str, { decamelize: false })})
.use(require('markdown-it-imsize'), {autofill: false})
.use(require('markdown-it-table-of-contents'))
.use(require('markdown-it-task-lists'), { enabled: true })
.use(require('markdown-it-linkify-images'), { imgClass: 'img-fluid' })
.use(require('markdown-it-task-lists'), {enabled: true})
.use(require('markdown-it-linkify-images'), {imgClass: 'img-fluid'})
.use(require('markdown-it-attrs'))
.use(require('./markdown-it-dimmed'))
.use(require('./markdown-it-radio-button'))
Expand All @@ -43,61 +43,6 @@ markdownIt.renderer.rules.table_close = (tokens, idx) => {
return '</table></div>';
};

// rewritten markdown-it renderer.js rule to add a div containing the language of the code block
markdownIt.renderer.rules.fence = (tokens, idx, options, env, slf) => {
var token = tokens[idx],
info = token.info ? markdownIt.utils.unescapeAll(token.info).trim() : '',
langName = '',
highlighted, i, tmpAttrs, tmpToken;

if (info) {
langName = info.split(/\s+/g)[0];
}

if (options.highlight) {
highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
} else {
highlighted = escapeHtml(token.content);
}

if (highlighted.indexOf('<pre') === 0) {
if (langName) {
return '<div class="code-block">' + highlighted
+ '<div class="code-block-lang"><span>' + langName + '</span></div>'
+ '</div>\n';
}
return highlighted + '\n';
}

// If language exists, inject class gently, without modifying original token.
// May be, one day we will add .clone() for token and simplify this part, but
// now we prefer to keep things local.
if (info) {
i = token.attrIndex('class');
tmpAttrs = token.attrs ? token.attrs.slice() : [];

if (i < 0) {
tmpAttrs.push(['class', options.langPrefix + langName]);
} else {
tmpAttrs[i][1] += ' ' + options.langPrefix + langName;
}

// Fake token just to render attributes
tmpToken = {
attrs: tmpAttrs
};

return '<pre><code' + slf.renderAttrs(tmpToken) + '>'
+ highlighted
+ '</code></pre>\n';
}


return '<pre><code' + slf.renderAttrs(token) + '>'
+ highlighted
+ '</code></pre>\n';
}

// highlight inline code
markdownIt.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
const token = tokens[idx];
Expand Down
20 changes: 0 additions & 20 deletions test/functional/test_site/expected/markbind/css/markbind.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,6 @@ pre > code.hljs {
border-radius: 5px;
}

.code-block {
position: relative;
}

.code-block > .code-block-lang {
background-color: #b4b4b9;
border-radius: 0.25rem;
color: #f8f8ff;
display: inline-block;
font-size: 75%;
line-height: 1;
padding: 0.25em 0.4em;
position: absolute;
right: 0.3em;
text-align: center;
top: 0.4em;
vertical-align: baseline;
white-space: nowrap;
}

kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,10 @@
<p>A commonly used format for writing user stories is:<br>
<strong><code>As a</code></strong> <code>&lt;use type/role&gt;</code> <strong><code>I can</code></strong> <code>&lt;function&gt;</code> <strong><code>so that</code></strong> <code>&lt;benefit&gt;</code></p>
<p>Here are some examples of user stories for the IVLE system:</p>
<div class="code-block">
<pre><code class="hljs bat">* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.
<pre><code class="hljs bat">* As a student, I can download files uploaded by lecturers, so that I can get my own <span class="hljs-built_in">copy</span> of the files.
* As a lecturer, I can create discussion forums, so that students can discuss things online.
* As a tutor, I can <span class="hljs-built_in">print</span> attendance sheets, so that I can take attendance during the class.
</code></pre>
<div class="code-block-lang"><span>bat</span></div>
</div>
<p>The <code>&lt;benefit&gt;</code> can be omitted if it is obvious. E.g. As a tutor, I can print attendance sheets. User stories are mainly used for early estimation and scheduling purposes.</p>
<p>According to
<ref xp-website="">this
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,6 @@ pre > code.hljs {
border-radius: 5px;
}

.code-block {
position: relative;
}

.code-block > .code-block-lang {
background-color: #b4b4b9;
border-radius: 0.25rem;
color: #f8f8ff;
display: inline-block;
font-size: 75%;
line-height: 1;
padding: 0.25em 0.4em;
position: absolute;
right: 0.3em;
text-align: center;
top: 0.4em;
vertical-align: baseline;
white-space: nowrap;
}

kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,6 @@ pre > code.hljs {
border-radius: 5px;
}

.code-block {
position: relative;
}

.code-block > .code-block-lang {
background-color: #b4b4b9;
border-radius: 0.25rem;
color: #f8f8ff;
display: inline-block;
font-size: 75%;
line-height: 1;
padding: 0.25em 0.4em;
position: absolute;
right: 0.3em;
text-align: center;
top: 0.4em;
vertical-align: baseline;
white-space: nowrap;
}

kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,10 @@ <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
</li>
</ul>
<p><strong>A <code>code</code> example:</strong></p>
<div class="code-block">
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span>
<pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span>
</code></pre>
<div class="code-block-lang"><span>html</span></div>
</div>
<h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-heading-1-1"></a></h2>
<p>A
<tooltip effect="scale" content=":exclamation: some **important explanation**" placement="top" trigger="hover">tooltip</tooltip>, a
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,6 @@ pre > code.hljs {
border-radius: 5px;
}

.code-block {
position: relative;
}

.code-block > .code-block-lang {
background-color: #b4b4b9;
border-radius: 0.25rem;
color: #f8f8ff;
display: inline-block;
font-size: 75%;
line-height: 1;
padding: 0.25em 0.4em;
position: absolute;
right: 0.3em;
text-align: center;
top: 0.4em;
vertical-align: baseline;
white-space: nowrap;
}

kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,6 @@ pre > code.hljs {
border-radius: 5px;
}

.code-block {
position: relative;
}

.code-block > .code-block-lang {
background-color: #b4b4b9;
border-radius: 0.25rem;
color: #f8f8ff;
display: inline-block;
font-size: 75%;
line-height: 1;
padding: 0.25em 0.4em;
position: absolute;
right: 0.3em;
text-align: center;
top: 0.4em;
vertical-align: baseline;
white-space: nowrap;
}

kbd {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
Expand Down

0 comments on commit 2ebee63

Please sign in to comment.