bnjmnt4n / reveal-code-focus Goto Github PK
View Code? Open in Web Editor NEWA Reveal.js plugin that allows focusing on specific lines of code blocks.
Home Page: https://bnjmnt4n.github.io/reveal-code-focus/
License: MIT License
A Reveal.js plugin that allows focusing on specific lines of code blocks.
Home Page: https://bnjmnt4n.github.io/reveal-code-focus/
License: MIT License
This may be obvious but how do you add this to reveal? Anything special needed for the dependencies? May be nice to add to the README.md
I wanted to use this plugin with a very long block of code, so I added a feature to scroll the focused lines' container to center the focused lines. You can view my work so far at https://github.com/joshkel/reveal-code-focus/tree/scrolling.
Would you be interested in this feature? I think it would be better if I added smooth scrolling and if I checked from a single boolean, defaulting to false, to an options object (with only the centerFocused option for now), defaulting to on, but I wanted to run the overall concept and design by you first.
I'm trying to get the following slide to display properly but something is going terribly wrong.
<section data-markdown data-menu-title="Example 1: Conversion">
<script type="text/template">
### Example 1: Conversion
```bash
$> conkit.convert example.mat ccmpred example.rr casprr
```
```python
>>> import conkit
>>> conkit.io.convert('example.mat', 'ccmpred', 'example.rr', 'casprr')
```
</script>
</section>
This does provide the correct color coding, but ignores line breaks.
Wrapping the code into <pre><code> ... </code></pre>
tags yields the same result.
I'm using highlight.js
v9.8.0 and the Tomorrow Night Eighties
theme imported in the <head>
of my index.html
.
<link rel="stylesheet" href="bower_components/highlightjs/styles/tomorrow-night-eighties.css">
Having internal links to certain fragments will not work with this plugin, since:
the code in updateCurrentSlide
makes a call to
while (Reveal.nextFragment()) {}
which will neglect fragment numbers. How can we fix that, I think, that the code is wrong, and we should only highlight the code up to the current fragment index,...
Could we add support for partial line highlighting?
Suppose I had the following code block...
for(var i = 0; i<= 10; i++) {
}
I'd like to be able to highlight just the initializer (var i = 0;
) using something like this:
<p class="fragment" data-code-focus="1" data-code-focus-columns="4-13">
Commentary on initializer goes here
</p>
It would be nice to be able to highlight different lines on different code blocks simulatenously, as I'm going over two variations of the same code in one slide.
I can mimic this by merging into one code block, of course, which I do now, but this would allow for even higher degree of freedom...
Is there a way to achieve this?
I tried the following code
together with pluing sampler which allows "Embed code samples taken directly from source files in your slides."
The repo is available at https://github.com/ldionne/reveal-sampler
Would be nice if one can supply a URI to the actuall file either by file:// or http
<section>
<h2>Lets first Take a Look @ Important Dependencies!</h2>
<pre data-cc="false">
<code class="json" data-sample='package.json'></code>
</pre>
<!-- <p class="fragment" data-code-focus="13">dependencies</p> -->
<!-- <p class="fragment" data-code-focus="23-24">angular-oauth2-oidc</p> -->
<p class="fragment" data-code-focus="13">
Dependencies block.
</p>
<p class="fragment" data-code-focus="23-24">
add angular-oauth2-oidc version.
</p>
<p class="fragment" data-code-focus="13">
Dependencies block.
</p>
<p class="fragment" data-code-focus="23-24">
add angular-oauth2-oidc version.
</p>
</section>
Will be great if this plugin also has built-in lines numbers support for the code.
For now, I'm doing this via CSS:
code {
counter-reset: line;
}
code > span {
counter-increment: line;
}
code > span:before {
content: counter(line);
text-align: right;
color: #555;
/* border-right: 1px solid #555; */
width: 40px;
padding-right: 8px;
margin-right: 8px;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Thanks for amazing plugin!
Add support for focusing on code when slides are printed.
I followed your install instructions for npm, but this isn't bringing in the highlight.js
. I think this used to be its own plugin, but I cannot find it.
Can I bring the two .js files into my project and follow the dependency instructions from there?
Using this plugin and markdown generated code doesn't work well. The code generated by markdown is displayed in one line and does not span multiple lines.
How to reproduce:
index.html
:diff --git a/index.html b/index.html
index 98accc3..3e5a887 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,12 @@
<body>
<div class="reveal">
<div class="slides">
- <section>Slide 1</section>
+ <section data-markdown>
+ ```C
+ int x = 1;
+ int y = 1;
+ ```
+ </section>
<section>Slide 2</section>
</div>
</div>
The code assigning the variables will be in the same line and not in two different lines.
When I have something linke this on the page:
It will be this after calling RevealCodeFocus()
:
I also tried the example in the README to make sure that this does not happen because it is XML. Though that should not be the problem, since it will be escaped before that happens:
// Split highlighted code into lines.
element.innerHTML =
element.innerHTML
.replace(/^(<[^>]+>)?/, function(_, html) {
if (html && ~html.indexOf('hljs-comment')) {
console.log(html.indexOf('comment'))
console.log(html)
return html + '<span class=line>';
} else {
return '<span class=line>' + (html ? html : '');
}
})
.replace(/\n\n/g, function() {
return '\n \n';
})
.replace(/\n/g, '</span><span class=line>') + '</span>';
I can't see the problem at first glance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.