javascript – Digitalia

27 Agosto 202627 Agosto 2026

add an external md file to a php page

… and, of course see it as html, with the same graphical appearance of any other web text.

A way can be use a very light javascript, md-block.js, di Lea Verou.

Then you can add a function to your php website, like the following:

<?php
/* to call a file Markdown from a given folder */

function scheda_md($file)
{
    global $yourwebsite;

    $file = basename($file);

    return '<md-block src="' .
           $yourwebsite .
           '/the-path/where-are-md-files/from-yourwebsite-root' .
           htmlspecialchars($file, ENT_QUOTES, 'UTF-8') .
           '"></md-block>';
}
?>

And in the page where you want to show that md file you can use this code:

<?= scheda_md('the-md-name.md') ?>

6 Maggio 20266 Giugno 2026

External markdown file in WordPress

If you want keep an external markdown file and include it in a WordPress page, you can follow these steps:

add a js file, such as md-block.js, in your js theme folder (typically /wp-content/themes/your-theme/js/ )
modify the functions.php file, in your root theme folder,. adding this code:

// per markdown BEGIN

function carica_md_block() {
    wp_enqueue_script(
        'md-block',
        get_stylesheet_directory_uri() . '/js/md-block.js',
        array(),
        null,
        true
    );
}
add_action('wp_enqueue_scripts', 'carica_md_block');

add_filter('script_loader_tag', function($tag, $handle, $src) {
    if ($handle === 'md-block') {
        return '<script type="module" src="' . esc_url($src) . '"></script>';
    }
    return $tag;
}, 10, 3);

function shortcode_scheda_md($atts) {
    $atts = shortcode_atts(array(
        'file' => ''
    ), $atts);

    $file = basename($atts['file']);

    if (empty($file) || pathinfo($file, PATHINFO_EXTENSION) !== 'md') {
        return '';
    }

    $url = content_url('/uploads/some-path/' . rawurlencode($file));

    return '<md-block src="' . esc_url($url) . '"></md-block>';
}
add_shortcode('scheda_md', 'shortcode_scheda_md');

// per markdown END

you can put your md files in the path above set: /uploads/some-path/ . Note that the folder some-path could be a symlinked one, from your local PC.
in the wordpress page when you want include a md file you can write,
- using HTML (customized), [scheda_md file="the-name-of-the-file.md"],
- or the code visualizaztion: something like[scheda_md]the-name-of-the-file.md[/scheda_md]
where that file, obviously, should be in /some-path/ folder.

21 Marzo 202621 Marzo 2026

How to toggle the opened <details>

If you have two <details> tags, and you want to close one, when you open the other, you can use this short js:

<script>
const details = document.querySelectorAll("details");

details.forEach(d => {
  d.addEventListener("toggle", () => {
    if (d.open) {
      details.forEach(other => {
        if (other !== d) {
          other.removeAttribute("open");
        }
      });
    }
  });
});
</script>

2 Marzo 2023

Pop-up footnotes (at the window bottom)

A good starting point is the Hugo footnotes

But I have done some improvements (according to my needs), as the following:

link (at the end of a html page) the file footnotes.js, with this content:

function getFootnoteContent(index) {
  const id = "fn:" + index;
  const fn = document.getElementById(id);
  return fn.innerHTML.trim();
}

function footnotePopup(showIndex, showCloseBtn) {
  const popupWrapper = document.querySelector("#popup-wrapper");

  // Set whether to display index and/or close button. Default is true for both
  if (showIndex === undefined) {
    showIndex = true;
  }

  if (showCloseBtn === undefined) {
    showCloseBtn = false;
  }

  // Create main container that will hold footnote content
  const popupContent = popupWrapper.appendChild(document.createElement("div"));
  popupContent.id = "popup-content";

  let popupIndex = null;
  if (showIndex) {
    popupIndex = popupWrapper.insertBefore(
      document.createElement("div"),
      popupContent
    );
    popupIndex.id = "popup-index";
  }

  let popupCloseButton = null;
  if (showCloseBtn) {
    popupCloseButton = popupWrapper.appendChild(document.createElement("div"));
    popupCloseButton.innerHTML = "[x]";
    popupCloseButton.id = "popup-close";
  }

  // Remove redundant [return] links from footnote list (optional)
  const fnReturns = document.querySelectorAll("a.footnote-return");
  fnReturns.forEach(function (fnReturn) {
    const parent = fnReturn.parentNode;
    parent.removeChild(fnReturn);
  });

  const fnRefs = document.querySelectorAll("a[id^='fnref:']");
  fnRefs.forEach(function (fnRef) {
    fnRef.addEventListener("click", handler("refs", fnRef));
  });

  //window.addEventListener("scroll", handler("close"));
  
  document.addEventListener(
    "click",
    function (event) {
      if (
        event.target.matches("a[id^='fnref']") ||
        event.target.matches("#popup-content")
      ) {
        return;
      }
      popupWrapper.style.display = "none";
    },
    false
  );

  if (showCloseBtn) {
    popupCloseButton.addEventListener("click", handler("close"));
  }

  function handler(type, node) {
    console.log("test");
    return function (event) {
      if (type === "close") {
        popupWrapper.style.display = "none";
      }

      if (type === "refs") {
        event.preventDefault();

        const index = node.id.substring(6);

        if (showIndex) {
          popupIndex.innerHTML = index + ".";
        }

        popupContent.innerHTML = getFootnoteContent(index);
        popupWrapper.style.display = "flex";
      }
    };
  }
}

footnotePopup(false, true);

2) Put, before that link, the div where the note will be shown

<div class=\"bottom-panel\" id=\"bottom-panel\">
 <div class=\"popup-wrapper\" id=\"popup-wrapper\"></div>
</div>

3) Modify the anchor tag (within your main text), with something like

<a href="#n1" id="fnref:1">[1]</a>

4) and the footnote should be like the following:

<p id="fn:1"><a href="#fnref:1">[1]</a> your footnote here.</p>

6 Maggio 202216 Maggio 2024

how to pass a php variable to javascript

You can use a code like the following:

<?php 
  $name= "Hello World";
?> 
<script> 
  var x = "<?php echo "$name"?>";      
  document.write(x);    
</script>

and then insert this code in a php page: but not with a js extension, but with some like inc

18 Aprile 20226 Maggio 2022

embed a div from another page

The way with less code is a jquery script. Like the following:

<p id="new"></p>

<script>
$( "#new" ).load( "/your-path/your-file.php #your-div" );
</script>

The only security limit is that you cannot use an absolute path, beginning with https:// .

But you can use a php variable to set your javascript value so that it may be available from any folder (sub-folder) of your website. See here how to pass a php variable to javascript.

Categoria: javascript