Jekyll2023-03-15T16:51:02+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/feed.xmlPetrichorMohsina's personal journal.Mohsina A.V.Indian Passport Renewal from outside India2022-05-31T00:00:00+00:002022-05-31T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/Indian-Passport-Renewal-from-another-country<p>In this article, I would like to discuss the process involved in renewing your Indian passport from outside the country.
Step-by-step process are described in detail below:</p>
<p><strong>1. Fill the application form:</strong></p>
<ul>
<li>Go to <a href="https://embassy.passportindia.gov.in/">Indian passport website</a>, select the country from where you are applying. It will redirect you to the login page, you can either register or login here.</li>
<li>After finishing the initial part of registering or logging in, you will be on the applicant home page.
<br /><br /><img src="/assets/images/RenewPassport_applicant_homepage.png" alt="Applicant homepage" width="500" /></li>
<li>Select the first option, Apply for Ordinary Passport.
Provide all the required details and submit it once completed. In case of any queries, you can refer the <a href="https://visa.vfsglobal.com/one-pager/india/united-states-of-america/passport-services/pdf/sample-passport-online-application-form.pdf">Sample application form</a>. Print the application. You will need to sign it at two places and affix a recent photograph. <em>Application Reference Number</em> mentioned in the form is required in later stages.</li>
</ul>
<p><strong>2. Mail-in application and payment:</strong></p>
<ul>
<li>Next step is to create a profile on <a href="https://services.vfsglobal.com/usa/en/ind/postal-interim">VFS Portal system</a>.
<br /><br /><img src="/assets/images/RenewPassport_vfs_page_redirect.png" alt="Redirect Page" width="600" /></li>
<li>It will take you to VFS Portal home page. Provide all details and proceed. You can either select FEDEX two-way postal service or provide your own courier labels.
<br /><img src="/assets/images/RenewPassport_vfs_login_page.png" alt="VFS Home page" width="400" /><img src="/assets/images/RenewPassport_vfs_payment_info.png" alt="VFS Payment page" width="393" /></li>
<li>Provide the application number from previous step, so as to associate your profile and the application.</li>
<li>VFS Indian Counsler Application Centre will vary based on state of residence.</li>
<li>Make the payments and print out the courier label and the confirmation page.</li>
</ul>
<p><strong>3. Physical application:</strong></p>
<ul>
<li>With the above step, online process is complete. Next we need to send the application booklet via mail. Print out the <a href="https://services.vfsglobal.com/usa/en/ind/document-checklist">Document checklist</a>.</li>
<li>Gather all the documents, get it signed and notarized. Send the application package.</li>
</ul>
<p>If you need more detailed explanations, visit <a href="https://visa.vfsglobal.com/usa/en/ind/apply-passport">VFS Global</a>.</p>Mohsina A.V.In this article, I would like to discuss the process involved in renewing your Indian passport from outside the country. Step-by-step process are described in detail below:Getting started with Jekyll2022-04-21T00:00:00+00:002022-04-21T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/Getting-started-with-JekyllMohsina A.V.Git-on-the-command-line-tutorial-for-Windows-user.2022-04-20T00:00:00+00:002022-04-20T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/Git-command-line-tutorial<p>A tutorial on how to perform various operations on git, using command line terminal instead of GUI. Here, we are considering that git is already installed and configured on your system as well as on github. If you need help, refer <a href="https://docs.gitlab.com/ee/gitlab-basics/start-using-git.html">here</a>.</p>
<p>There could be different scenarios where we can use git. We will handle them separately and list the commands here.</p>
<h3 id="scenario-1-you-have-a-remote-project-and-want-to-keep-track-of-it">Scenario 1: You have a remote project and want to keep track of it</h3>
<ol>
<li>
<p>Initialize git on the local folder.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git init
</code></pre></div> </div>
<p>In case if you want to remove the git folder from the directory, use:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> rmdir .git
</code></pre></div> </div>
<p>Or if there are subfolders, you can use:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> rmdir /s .git
</code></pre></div> </div>
</li>
<li>
<p>To check the status of the current folder, use:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git status
</code></pre></div> </div>
</li>
<li>
<p>Once the folder is ready and you have made all the necessary changes, we need to put all changes to the staging area from the current working directory.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git add -A
</code></pre></div> </div>
<p>** command ‘-A’ will add all files to the staging area. In case, if we need to stage each file
one by one, replace ‘-A’ with the filename. <br />
To remove files from staging are:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git reset <file name>
</code></pre></div> </div>
</li>
<li>
<p>Next phase involves commit. All the staged changes are commited locally. Consider it as taking a snapshit of the project in its current status.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git commit -m "message"
</code></pre></div> </div>
<p>** descriptive messages will be helpful in the later stages.</p>
</li>
<li>
<p>To get the log of all the changes done till now, we can use the following command:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git log
</code></pre></div> </div>
</li>
</ol>
<h3 id="scenario-2-cloning-a-remote-repository">Scenario 2: Cloning a remote repository</h3>
<ol>
<li>
<p>Suppose, we need to clone a remote repository say from github.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git clone <url> <where to clone>
</code></pre></div> </div>
<p>Eg: git clone https://github.com/mohsinaav/TodoList.git .</p>
<p>** use . , if you are in the current destination directory</p>
</li>
<li>
<p>Some commands to get information about the remote repository includes:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git remote -v
git branch -a
</code></pre></div> </div>
</li>
<li>
<p>Once all the necessary changes are made to the local repository, staged and committed, now it’s time to push those changes.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git diff
</code></pre></div> </div>
<p>The above command will show all the changes made recently or after the last push. Before pushing any changes, make sure to pull the recent changes from the remote repository, as there are possibilities of changes done by other contributors.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git pull origin master
</code></pre></div> </div>
<p>After making sure that the remote and local repos are in sync, other than the changes made by us, we can push it. Pushing step sends the recent commit history from the local repository up to GitHub.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git push origin master
</code></pre></div> </div>
</li>
<li>
<p>Better approach to this scenario is to create a new branch and make required changes for desired feature. Once all testing and code requirements are met, we can push and merge it to the master branch.</p>
<p>To create a new branch, use:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git branch <new_branch_name>
</code></pre></div> </div>
<p>Now, to start working on this branch, we need to check it out.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git checkout <new_branch_name>
</code></pre></div> </div>
<p>As done earlier, once modifications are completed in the new branch, stage and commit it first. After that push it into the master</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git push -u origin <new_branch_name>
</code></pre></div> </div>
</li>
<li>
<p>Till now, we have pushed the changes done in the new_branch from local to remote, next we need to merge this new branch to the master and resolve any conflicts if any.</p>
<p>For this, we need to switch to the master branch.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git checkout <master - branch to be merged into>
</code></pre></div> </div>
<p>As mentioned earlier, it is a best practice to always pull the changes before pushing anything.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git pull origin master
</code></pre></div> </div>
<p>The following command will list all the branches that has been merged yet.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git branch --merged
</code></pre></div> </div>
<p>Now, we can merge the <code class="language-plaintext highlighter-rouge">new_branch_name</code> to the master branch.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git merge <new_branch _name>
</code></pre></div> </div>
<p>After that, push the master branch to make changes accessible everywhere.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git push origin master
</code></pre></div> </div>
</li>
<li>
<p>Once the feature request is completed, we can delete that branch.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git branch -d <new_branch _name>
</code></pre></div> </div>
</li>
</ol>
<p>The above command deleted the new_branch_name locally, but we should also delete it in the remote repository, once it is not necessary anymore.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git push origin --delete sample_division
</code></pre></div></div>
<p>We still need to discuss about many more features like conflicts during merging, etc, which we will do it in the future post.</p>Mohsina A.V.A tutorial on how to perform various operations on git, using command line terminal instead of GUI. Here, we are considering that git is already installed and configured on your system as well as on github. If you need help, refer here.Contributions to open source project - ‘html5-qrcode’2022-04-11T00:00:00+00:002022-04-11T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/Contribution-to-html5-qrcode<p>Html5-QRCode is a light-weight library to easily integrate QR code scanning functionality to a web application. All details regarding the project are clearly stated in it’s github page - <a href="https://github.com/mebjas/html5-qrcode">html5-qrcode</a>. An end-to-end implementation is done by the author - <a href="https://scanapp.org/#reader">scanapp.org</a>. I recently came across it and had the chance to contribute to it by adding few changes.</p>
<p><img src="/assets/images/html5_qrcode_cam_default.png" alt="Homepage" width="500" /></p>
<p>By default, the library would allow two type of scanning options - <code class="language-plaintext highlighter-rouge">Camera based scan</code> and <code class="language-plaintext highlighter-rouge">File based scan</code>. An <a href="https://github.com/mebjas/html5-qrcode/issues/405">issue</a> was raised seeking an option to configure this scanning option. I was able to edit this configuration, such that the user can either use only <code class="language-plaintext highlighter-rouge">Camera based scan</code> or only <code class="language-plaintext highlighter-rouge">File based scan</code> or use in the default manner.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>let config = {
fps: 10,
qrbox: {width: 100, height: 100},
rememberLastUsedCamera: true,
// Only support camera scan type.
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE]
};
</code></pre></div></div>
<p>Here the property <code class="language-plaintext highlighter-rouge">supportedScanTypes</code> in the config, lets the user decide the type of scanning option. If you only need the camera as the scanning option, you can use the code below:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Only support camera scan type.
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA]
</code></pre></div></div>
<p>In case if only file scanning option is required, you can use this one:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Only support file scan type.
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
</code></pre></div></div>
<p>By default, both scanning options are available. Now, if you want the file based scanning to be the default option on page load, set the configuration as below:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Only support camera scan type.
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA]
</code></pre></div></div>
<p>This is how the scanapp.org would look like on using the above configurations.
|<img src="/assets/images/html5_qrcode_camera_selected.png" alt="Cam selected" width="300" height="300" />| <img src="/assets/images/html5_qrcode_file_selected.png" alt="File Selected" width="300" height="300" />|
|—————–|——————|
|Camera only option|File only option|</p>Mohsina A.V.Html5-QRCode is a light-weight library to easily integrate QR code scanning functionality to a web application. All details regarding the project are clearly stated in it’s github page - html5-qrcode. An end-to-end implementation is done by the author - scanapp.org. I recently came across it and had the chance to contribute to it by adding few changes.Inspiration for project Todolist2022-04-11T00:00:00+00:002022-04-11T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/Project-Todolist<p>In my opinion, as part of organising our personal as well as professional life, one needs to keep a
list of tasks to complete. Some people like me, uses the classic pen and paper method while others keep
their list online. Both techniques has their pros and cons, and we are not getting into that debate 😁!!</p>
<p><img src="/assets/images/Todolist_sample.jpg" alt="drawing" width="500" /></p>
<p>Usually every night, I used to write down the tasks that needed my attention the very next day. The first thing I did on reaching my desk, was to check that list. I feel writing down a particular thing leaves more impact and stays in memory for long. But, ofcourse, it is difficult to maintain. It would get messy easily, and then I would start a new list. To my surprise, it happened more than I expected. That’s when I started using Google keep, as it is easy to syncronize as well as use with Google home devices.</p>
<p>When I decided to work on a project using Flask framework, TodoList was the first thing that came to mind. Even though Google keep does it job impecably, I wanted to add few more custom functionalitites to it 😉.</p>
<p>This is how my web application currently looks like.</p>
<p><img src="/assets/images/Todolist_adding_tasks.gif" width="800px" /></p>
<p>Basic functionalities implemented in <code class="language-plaintext highlighter-rouge">TodoList</code> till now are:</p>
<ol>
<li>Create a list (customised color selection),</li>
<li>A list can be edited, marked as important, archived or deleted.</li>
<li>Within a list, multiple tasks can be added.</li>
<li>These tasks can be edited or deleted.</li>
<li>Once the task is complete, it can be checked.</li>
<li>All the completed tasks are shown in the bottom of the list page, grouped by the date of completion.</li>
<li>All the tasks can be marked as completed or incomplete, at-once.</li>
<li>Basic search option available.</li>
<li>Login, logout options are encorporated.</li>
<li>User profile can be customized.</li>
</ol>
<p><code class="language-plaintext highlighter-rouge">TodoList</code> project will be including following features soon:</p>
<ol>
<li>Move task up and down,</li>
<li>Share and contributor options,</li>
<li>Adding sub tasks to a task,</li>
<li>Dark mode option</li>
</ol>
<p>In future, I will be adding more technical details of the project here. Meanwhile, feel free to look through the project <a href="https://github.com/mohsinaav/TodoList"><code class="language-plaintext highlighter-rouge">Todolist repo</code></a>. Hope it will help someone and stay tune 👍.</p>Mohsina A.V.In my opinion, as part of organising our personal as well as professional life, one needs to keep a list of tasks to complete. Some people like me, uses the classic pen and paper method while others keep their list online. Both techniques has their pros and cons, and we are not getting into that debate 😁!!Shaaz and his creative works2022-01-27T00:00:00+00:002022-01-27T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/Shaaz<p>I will be presenting my son’s creative works, along with his achivements here. He is 5 years old and loves reading. Stay tune 🧒.</p>
<ol>
<li>An <strong>avatar</strong> created for his website. He made this in an app - Jamboard.</li>
</ol>
<p><img src="/assets/images/shaaz_avatar.png" alt="drawing" width="500" /></p>Mohsina A.V.I will be presenting my son’s creative works, along with his achivements here. He is 5 years old and loves reading. Stay tune 🧒.N-Queens Problem2021-10-13T00:00:00+00:002021-10-13T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/N-Queens-Problem<p>The N-Queen’s problem is a classic example of backtracking, often implemented in the form of recursion. It is considered as a hard problem. The problem statement goes like this.</p>
<blockquote>
<p>In a n x n board, locate n queens suct that no 2 queens can attack each other i.e. all queens should be in safe positions. Calculate the number of such solutions, for a value of n.</p>
</blockquote>
<h2 id="what-is-backtracking">What is Backtracking?</h2>
<p>According to wikipedia,</p>
<blockquote>
<p><a href="https://en.wikipedia.org/wiki/Backtracking">Backtracking</a> is a general algorithm for finding all(or some) solutions to some
computational problems, which incrementally builds candidates to the solution and abandons a candidate(“backtracks”) as soon as it determines that the candidate cannot lead to a valid solution.</p>
</blockquote>
<p>The <code class="language-plaintext highlighter-rouge">brute force</code> solution would be to search across each board position and determine if it is safe to place a queen or not and continue till the last block. Such a solution would take $O(N^2)$ time to get the result, which is far too slow.</p>
<p>Here I am going to explain the backtracking solution. The key points to keep in mind are:</p>
<ol type="a">
<li><strong>We can consider a board as a 2-dimensional list with all entries as 0. Placing a queen means 0 turns 1.</strong> During backtracking, removing a queen means 1 turns back to 0. Todo: add a picture here.</li>
<li>If a queen is placed in a row, no more queen can be placed in that particular row. So move on to the next row. </li><br />
<i>We will keep track of the columns that already has a queen in it.</i>
<li>Each position on the baord, has its diagonal values, calculated as $ diag = row + col $ <br />
If we determine these diagonal values, the board would look like this:
Todo: add a diagonal pic here.</li><br />
For example, if a queen is placed at pos (1,1), then its diagonal value is 2. Other positions like (2,0) and (0,2) have same diagonal values and thus are not safe for any other queens. *We will be keeping track of these diag values at each position, whenever a queen is added.*
<li>Similarly, anti-diagonal values are calculated as $ anti-diag = row - col $<br />
The anti-diagonal values of each position on the board would look like this:
Todo:add a anti-diagonal pic here.</li><br />
<i>Again, we will be keeping track of anti-diagonal values.</i><br />
<li>At any current position, we can determine if it is under attack by any of the previous queens, by validating if the current position is already present in any of the three above lists, mentioned in points b,c and d. </li>
</ol>
<h3 id="psuedo-code">Psuedo code:</h3>
<ol>
<li>Create a board - list(list(n)) n x n elements, all values 0</li>
<li>Utility function to display the board later.</li>
<li>Define a recursive function that takes in multiple arguments:
<ul>
<li>n: number of row or column in the board,</li>
<li>row: current row value,</li>
<li>count: to keep track of column value,</li>
<li>cols: set of columns of queens already placed,</li>
<li>diags: set of diagonal values and</li>
<li>anti_diags: set of anti-diagonal values.</li>
</ul>
</li>
<li>Go through each column one by one, starting from 0, till n.</li>
<li>Determine the current diagonal and ant-diagonal value</li>
<li>Check If current row is already in cols set, or current diag value is in diag set or current anti-diag value is in anti-diag set.</li>
<li>If present, skip to the next column.</li>
<li>Else, place a queen at this location by changing 0 to 1.</li>
<li>Add current values to respective sets.</li>
<li>Next call the recursive function for the next row until we reach the last row.</li>
<li>If it is the last row, increment the count value and return it.</li>
<li>Once the count value is returned, remove the last added values from different sets added before. This is the back tracking step.</li>
</ol>
<p>Finally, we will get the count of possible solution.</p>
<h3 id="python-solution">Python solution:</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>class Solution(object):
def __init__(self):
self.board = [[]]
def set_board(self, n):
self.board = [[0] * n for _ in range(n)]
def display_board(self, n):
i = 0
for i in range(n):
print(f"{self.board[i]}")
def backtrack_N_Queens(self, n, row, count, cols, diags, anti_diags):
for col in range(n):
cur_diag = row + col
cur_antidiag = row - col
if (col in cols or cur_diag in diags or cur_antidiag in anti_diags):
continue
self.board[row][col] = 1
cols.add(col)
diags.add(cur_diag)
anti_diags.add(cur_antidiag)
if row == n-1:
count += 1
else:
count = self.backtrack_N_Queens(n, row + 1, count, cols, diags, anti_diags)
anti_diags.remove(cur_antidiag)
diags.remove(cur_diag)
cols.remove(col)
self.board[row][col] = 0
return count
if __name__ == "__main__":
sol = Solution()
n = int(input("Enter the value of n: "))
sol.set_board(n)
res = sol.backtrack_N_Queens(n, row = 0, count = 0, cols = set(), diags = set(), anti_diags = set())
print(f"Number of available solutions for a {n} x {n} board are ",res)
</code></pre></div></div>
<p>I am pretty sure, there must be various ways to implement the backpropagation solutions for this problem.
Todo: Add time and space complexity for brute force and back tracking.</p>Mohsina A.V.The N-Queen’s problem is a classic example of backtracking, often implemented in the form of recursion. It is considered as a hard problem. The problem statement goes like this. In a n x n board, locate n queens suct that no 2 queens can attack each other i.e. all queens should be in safe positions. Calculate the number of such solutions, for a value of n.Data Structures and Algorithms (DSA)2021-09-17T00:00:00+00:002021-09-17T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/Data-Structures-and-AlgorithmsMohsina A.V.Pullquotes2019-12-11T00:00:00+00:002019-12-11T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/pullquotes<p>In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element, serving to entice readers into the article or to highlight a key topic. It is typically placed in a larger or distinctive typeface and on the same page.<span data-pullquote="It is typically placed in a larger or distinctive typeface and on the same page."></span> Pull quotes are often used in magazine and newspaper articles, annual reports, and brochures, as well as on the web. They can add visual interest to text-heavy pages with few images or illustrations.</p>
<p>Placement of a pull quote on a page may be defined in a publication’s or website’s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown. Because the pull quote invites the reader to read about the highlighted material, the pull quote should appear before the text it cites and, generally, fairly close to it.</p>
<p>Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication’s house style, pull quotes may be abbreviated for space or paraphrased for clarity, with or without indication.</p>
<p>A disadvantage of pull quotes as a design element is that they can disrupt the reading process of readers invested in reading the text sequentially by drawing attention to ghost fragments out of context. At the other extreme, when pull quotes are used to break up what would otherwise be a formless wall of text, pull quote can serve as visual landmarks to help the reader maintain a sense of sequence and place.</p>Mohsina A.V.In graphic design, a pull quote (also known as a lift-out pull quote) is a key phrase, quotation, or excerpt that has been pulled from an article and used as a page layout graphic element, serving to entice readers into the article or to highlight a key topic.Code snippets in a blog post2019-08-12T00:00:00+00:002019-08-12T00:00:00+00:00https://mohsinaav.github.io//https://mohsinaav.github.io/code-snippets<p>This post demonstrate the use of code snippets in the theme. The code snippets are powered by <a href="http://pygments.org/">Pygments</a> and the code theme that is been used in Reverie is called <a href="https://draculatheme.com/">Draula</a>.</p>
<p>This is a raw snippet:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>hello world
123
This is a text snippet
</code></pre></div></div>
<p>This is a PHP snippet:</p>
<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><?php</span>
<span class="k">echo</span> <span class="s1">'Hello, World!'</span><span class="p">;</span>
<span class="cp">?></span>
</code></pre></div></div>
<p>This is a JavaScript snippet:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span>
<span class="kd">const</span> <span class="nx">minus</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">-</span> <span class="nx">b</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span><span class="mi">200</span><span class="p">))</span> <span class="c1">// 300</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">minus</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span><span class="mi">200</span><span class="p">))</span> <span class="c1">// -100</span>
</code></pre></div></div>
<p>This is a Python snippet:</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">def</span> <span class="nf">say_hello</span><span class="p">():</span>
<span class="k">print</span><span class="p">(</span><span class="s">"hello world!"</span><span class="p">)</span>
<span class="n">say_hello</span><span class="p">()</span> <span class="o">//</span> <span class="s">"hello world!"</span>
</code></pre></div></div>Mohsina A.V.This post demonstrate the use of code snippets in the theme. The code snippets are powered by Pygments and the code theme that is been used in Reverie is called Draula.