Hii guys doing here we are back with a new article. in this article we are going to discuss about the topic under blogging tips. Hope all on doing well and safe please explore all the contents in our blog and support us. 

we are going to discuss about the code box which contains the code of different programming languages. what is the necessity of a code box? what's so special about it? Here is the answer for this in this article. 

Consider in a programming language it contains many parts such as the inbuilt functions the keywords and many more. Coming to HTML we have classes id's tags and many more. 

To convey the code to The Reader  the each part of the code must be highlighted in different colours. Like the inbuilt function should be in  in a color, the header file should be in another colour, the keywords must be in a colour the tags must been separate color. Applying color to each part of the text or code in HTML will be slightly or more difficult. So here is the solution for it.

Adding style in HTML for each part of the code will be a difficult task so here is a website which makes your task very easy.

You may like these:


Hilite.me Website adds style to each part of the code and provides  with many styles for it.  It also  designs a background colour for the court within a few seconds.  So here are the steps you need to follow to  use the website I have mentioned is like customisation for the HTML code which the website provides.

Here are the step by dtep process to use the website.

  • Visit Hilite.me website.
  • Paste your code in the Source code box.

  • In the Language drop-down select the language of the code.

  • Select the style in the style drop-down.I would recommend the dark theme vim.


  • Check or uncheck the Line numbers if you want.


  • Click on the highlight button.


After clicking the highlight button the HTML code for your programming language code will appear in the HTML box.


Boom!! you have the HTML code now simply copy the HTML code and paste it in the HTML section of your article or post.

Customizations:

The code box the website gives is descent but few more customization will make it more user-friendly.
Here are few customization.

<div style="background: #000000; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><table><tr><td><pre style="margin: 0; line-height: 125%">

The code box the website provides has width attribute set to auto which covers the entire screen you can change the width attribute to like 75% or anything according to your requirements.If the width of the code exceeds the width of the code box a scrollable bar will appear so that you can scroll it to view the full code.


In the code he height attribute is not present so that the entire length of the code is spread through the post. If you add a height attribute to the code and set it to for example 30% . The height will be minimized the later part of the code can be viewed by scrolling the bar.

<div style="background: #000000; overflow:auto;width:auto;height:30%;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><table><tr><td><pre style="margin: 0; line-height: 125%">

Here i have included an example of the code box.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
#include<stdio.h>
#include<stdlib.h>
struct col_node {
	int col;
	int data;
	struct col_node *next_col;
};

struct row_node {
	int row;
	struct col_node *next_col;
	struct row_node *next_row;
};
struct row_node *create_rows(int);
void insert_list(struct row_node*, int,int);
void display(struct row_node*);
int main()
{
  int a[10][10];
  int i,j,row,col;
  struct row_node *first,*p;
  first=NULL;
  printf("Enter the row and cols..\n");
  scanf("%d %d",&row, &col);

  
  printf("Enter the data for the matrix..\n");
  for(i=0;i<row;i++)
  {
     for(j=0;j<col;j++)
      scanf("%d",&a[i][j]);
  }
  //storing the matrix as a multi list...;
  
  first=create_rows(row);
  p=first;
  for(i=0;i<row;i++)
  {  
     for(j=0;j<col;j++)
       if(a[i][j]!=0)
         insert_list(p,j,a[i][j]);
     p=p->next_row;
     
  }
  //displaying the matrix as a list

  display(first);
 }

	
		
	
  struct row_node* create_rows(int r)
  {
   struct row_node *p,*q;
   struct row_node *temp;

   int i;
   p=NULL;
   q=NULL;
   //create r number of row nodes
   for(i=0;i<r;i++)
   {
    temp=malloc(sizeof(struct row_node));
    temp->row=i;
    temp->next_row=NULL;
    temp->next_col=NULL;

    if (p==NULL)//first col node
    {
      p=temp;
      q=temp;
     }
     else
     {
      q->next_row=temp;
      q=temp;
     }
   }
   return p;//return the address of the first row node
 }

  void insert_list(struct row_node *p, int col, int x)
  {
    struct col_node *q,*temp;
    int i,j;
   
    
    temp=malloc(sizeof(struct col_node));
    temp->col=col;
    temp->data=x;
    temp->next_col=NULL;

    //insert each column node at the end of the list
    q=p->next_col;
    if(q==NULL)
     p->next_col=temp;
   else
   {
    while(q->next_col!=NULL)
       q=q->next_col;
    q->next_col=temp;
   }
}
 

  void  display(struct row_node *p)
  {
    struct col_node *q;
    printf("\n");
    while(p!=NULL)
    {
      printf("%d ->",p->row);
      q=p->next_col;
      while(q!=NULL)
      {
       printf("%d,",q->col);
       printf("%d -> ",q->data);
       q=q->next_col;
      }
     p=p->next_row;
     printf("\n");
    }
  }

Thanks for reading.

Tags

Post a Comment

Post a Comment

Previous Post Next Post