The latest articles on DEV Community by Yusuke Wada (@yusukebe). https://dev.to/yusukebe https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F700784%2F79ccbb26-6437-4e4c-94a6-0643856c8e20.jpeg https://dev.to/yusukebe en Yusuke Wada Tue, 26 Oct 2021 18:27:51 +0000 https://dev.to/yusukebe/github-cli-extension-to-preview-readmemd-4icc https://dev.to/yusukebe/github-cli-extension-to-preview-readmemd-4icc <p>Have you ever thought want to preview README.md before push to GitHub? I built the <a href="https://cli.github.com">GitHub CLI</a> extension to make it come true. It named <code>gh-markdown-preview</code>.</p> <p><a href="https://github.com/yusukebe/gh-markdown-preview">https://github.com/yusukebe/gh-markdown-preview</a></p> <h2> Features </h2> <ul> <li> <strong>NO-dependencies</strong> - You need <code>gh</code> command only.</li> <li> <strong>Zero-configuration</strong> - You don't have to set the GitHub access token.</li> <li> <strong>Looks exactly</strong> the same - You can see same as GitHub.</li> <li> <strong>Live reloading</strong> - You don't need reload the browser.</li> </ul> <h2> Requirements </h2> <p>You have to install GitHub CLI before install.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$ brew install gh </code></pre> </div> <h2> Installation </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$ gh extension install yusukebe/gh-markdown-preview </code></pre> </div> <h2> Usage </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$ gh markdown-preview README.md </code></pre> </div> <p>Or this command will detect README file in the directory automatically.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$ gh markdown-preview </code></pre> </div> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SZJXayuz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83zpvubioa4hee4r2i2f.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SZJXayuz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83zpvubioa4hee4r2i2f.png" alt="Screenshot"></a></p> <p>Then access the local web server such as <a href="http://localhost:3333">http://localhost:3333</a> with Chrome, Firefox, or Safari.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--m5og2Y33--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79jo7cenpt6h481uhdni.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--m5og2Y33--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79jo7cenpt6h481uhdni.png" alt="Screenshot"></a></p> <p>Available Options:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>-p, --port TCP port number of this server (default: 3333) -r, --reload Enable live reloading (default: false) </code></pre> </div> <p><code>gh markdown-preview</code> is a GitHub CLI extension to preview your markdown such as README.md. The <code>gh markdown-preview</code> commnad start a local web server to serve your markdown document file with a GitHub style.</p> <p><code>gh markdown-preview</code> command shows the HTML got from GitHub official markdown API with the CSS extracted from GitHub web site. The styles are almost the same!</p> <p>You can see rendered README before uploading to GitHub!</p> <p>If you want to have more information, check this repository and give me a star:)</p> <p><a href="https://github.com/yusukebe/gh-markdown-preview">yusukebe/gh-markdown-preview: GitHub CLI extension to preview README looks the same as GitHub.</a></p> github go cli markdown