Added optional rendering of code block titles (#148)
This commit is contained in:
		
							
								
								
									
										13
									
								
								assets/js/code-title.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										13
									
								
								assets/js/code-title.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,13 @@
 | 
			
		||||
 | 
			
		||||
function addTitleToCodeBlocks() {
 | 
			
		||||
  var els = document.getElementsByClassName("highlight");
 | 
			
		||||
  for (var i = 0; i < els.length; i++) {
 | 
			
		||||
    if (els[i].title.length) {
 | 
			
		||||
      let div = document.createElement("div");
 | 
			
		||||
      if (els[i].getElementsByClassName("code-title").length) continue;
 | 
			
		||||
      div.textContent=els[i].title;
 | 
			
		||||
      div.classList.add("code-title")
 | 
			
		||||
      els[i].insertBefore(div, els[i].firstChild);
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
@@ -1,18 +1,26 @@
 | 
			
		||||
const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
 | 
			
		||||
const currentTheme = localStorage.getItem('theme') ?? userPref
 | 
			
		||||
const syntaxTheme = document.querySelector("#theme-link");
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
{{ $darkSyntax := resources.Get "styles/_dark_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify  }}
 | 
			
		||||
{{ $lightSyntax := resources.Get "styles/_light_syntax.scss" | resources.ToCSS (dict "outputStyle" "compressed") | resources.Fingerprint "md5" | resources.Minify  }}
 | 
			
		||||
 | 
			
		||||
if (currentTheme) {
 | 
			
		||||
  document.documentElement.setAttribute('saved-theme', currentTheme);
 | 
			
		||||
  (currentTheme === 'dark') ? syntaxTheme.href = '{{ $darkSyntax.Permalink }}' : syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const switchTheme = (e) => {
 | 
			
		||||
  if (e.target.checked) {
 | 
			
		||||
    document.documentElement.setAttribute('saved-theme', 'dark')
 | 
			
		||||
    localStorage.setItem('theme', 'dark')
 | 
			
		||||
    document.documentElement.setAttribute('saved-theme', 'dark');
 | 
			
		||||
    localStorage.setItem('theme', 'dark');
 | 
			
		||||
    syntaxTheme.href = '{{ $darkSyntax.Permalink }}';
 | 
			
		||||
  }
 | 
			
		||||
  else {
 | 
			
		||||
    document.documentElement.setAttribute('saved-theme', 'light')
 | 
			
		||||
    localStorage.setItem('theme', 'light')
 | 
			
		||||
    syntaxTheme.href = '{{ $lightSyntax.Permalink }}';
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user