Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add span with command-line-(input|output) class to command-line plugin lines #3312

Merged
merged 3 commits into from Feb 2, 2022

Conversation

at055612
Copy link
Contributor

@at055612 at055612 commented Jan 28, 2022

Currently it is not possible to distinguish between input and output, unless all input has some kind of highlighting on it. This change wraps each line with a span and class to indicate whether it is input or output.

Reasons for needing to do this so that it is possible to:

  • Style the output to look different to the input, e.g. lighter colour
  • Set user-select: none; for output lines
  • Maybe add a toggle to show/hide output lines.

For example

<pre class="command-line language-bash" data-user="root" data-host="host1" data-filter-output="(out)" tabindex="0">
	<code class="language-bash">
		<span class="command-line-prompt">
			<span data-user="root" data-host="host1"></span>
			<span></span>
			<span data-user="root" data-host="host1"></span>
			<span></span>
		</span>
		<span class="command-line-input">
			<span class="token builtin class-name">echo</span>
			<span class="token string">"hello"</span> plain 
			<span class="token string">"world"</span>
		</span>
		<span class="command-line-output">hello plain world</span>
		<span class="command-line-input">
			<span class="token builtin class-name">echo</span>
			<span class="token string">"
				<span class="token variable">
					<span class="token variable">$(</span>
					<span class="token function">date</span>
					<span class="token variable">)</span>
				</span>"
			</span>
		</span>
		<span class="command-line-output">Fri 28 Jan 21:06:47 GMT 2022</span>
	</code>
</pre>

The above HTML was from
image

Allows distinction between input and output for custom styling,
e.g. setting user-select: none; for .command-line-output.
@github-actions
Copy link

github-actions bot commented Jan 28, 2022

JS File Size Changes (gzipped)

A total of 1 files have changed, with a combined diff of +33 B (+3.4%).

file master pull size diff % diff
plugins/command-line/prism-command-line.min.js 965 B 998 B +33 B +3.4%

Generated by 🚫 dangerJS against 8ac587c

Copy link
Member

@RunDevelopment RunDevelopment left a comment

Sorry for the delay @at055612!

The PR in itself looks good. I just suggest using different CSS classes in my comment.

plugins/command-line/prism-command-line.js Outdated Show resolved Hide resolved
Co-authored-by: Michael Schmidt <msrd0000@gmail.com>
@at055612
Copy link
Contributor Author

at055612 commented Feb 2, 2022

Accepted your css class name change. I have re-generated the minified js.

@RunDevelopment RunDevelopment merged commit 82d0ca1 into PrismJS:master Feb 2, 2022
12 checks passed
@RunDevelopment
Copy link
Member

RunDevelopment commented Feb 2, 2022

Thank you for contributing @at055612!

@at055612
Copy link
Contributor Author

at055612 commented Feb 2, 2022

Thanks for merging this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants