// .source-emphasis
// Demonstration of highlighting portions of source
// :include: //div[@class="slides"]
// :header_footer:
= Source Code Emphasis
:icons: font
:source-highlighter: highlightjs
:highlightjs-languages: x86asm
:revealjs_hash: yes
:revealjs_height: 1080
:revealjs_width: 1920

== Using Asciidoctor features

=== Bold markers and `subs="+quotes,+macros"` attribute

[source,java,subs="+quotes,+macros"]
----
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
            **.antMatchers("/resources/$$**$$").permitAll()**
            .anyRequest().authenticated()
            .and()
        .formLogin()
            .loginPage("/login")
            .permitAll();
----

=== Callouts

[source, rust]
----
fn main() {
    println!("Hello World!"); // <1>
}
----
<1> `println!` is a macro.


== Using reveal.js <mark> tags

Needs `subs="none"` attribute

[source, rust, subs="none"]
----
fn main() {
    <mark>println!</mark>("Hello marked World!");
}
----

== Using reveal.js data-line-numbers

// This example was taken from Reveal.js README
// https://github.com/hakimel/reveal.js/blob/master/README.md#line-numbers--highlights

Highlights are using Asciidoctor syntax not reveal.js.
Ex: `4..8,11` instead of `4-8,11`.

[source, javascript, highlight="4..8,11"]
----
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
----

== Step by Step with data-line-numbers

// Requires reveal.js 3.9.0+
Highlights are using Asciidoctor syntax not reveal.js.
Ex: `1|2..3|4,6..10` instead of `1|2-3|4,6-10`.

[source, javascript, highlight="1|2..3|4,6..10"]
----
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
----

[.columns]
== ASM from Compiler

[source.column,x86asm,highlight="3..6|7..9|10|11,12"]
----
main        proc near
var_10      = dword ptr -10h
            push ebp                      <1>
            mov ebp, esp
            and esp, 0FFFFFFF0h
            sub esp, 10h
            mov eax, offset aHelloWorld   <2>
            mov [esp+10h+var_10], eax
            call _printf
            mov eax, 0                    <3>
            leave                         <4>
            retn
main        endp
----

[.column]
--
<1> Function prologue
<2> Preparing arguments and calling `printf`
<3> Clean-up registers
<4> Function epilogue
--