Giter Site home page Giter Site logo

bnjmnt4n / reveal-code-focus Goto Github PK

View Code? Open in Web Editor NEW
112.0 5.0 14.0 3.04 MB

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

JavaScript 39.24% HTML 60.76%
reveal-js code highlight focus

reveal-code-focus's Issues

How to install

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

Scroll to focused code

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.

Code highlighted in single line

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.

img01

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">

Internal Links not working

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,...

Partial line highlighting

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>

Is there a way to highlight different lines on multiple code blocks simultaneously

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?

Support loading of file through URI. Tried using sampler which does this embedding of code but focus did not work.

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 adds lines numbers for code

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!

Does not bring in highlight.js

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?

Markdown generated code line breaks are removed

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:

  1. Clone the reveal.js project
  2. Install reveal-code-focus plugin
  3. Apply this patch to 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>
  1. Present it

The code assigning the variables will be in the same line and not in two different lines.

does not seem to work

When I have something linke this on the page:

screen shot 2015-11-20 at 23 32 50

It will be this after calling RevealCodeFocus():

screen shot 2015-11-20 at 23 33 07

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&nbsp;\n';
                })
                .replace(/\n/g, '</span><span class=line>') + '</span>';

I can't see the problem at first glance.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.